import React from 'react';
import { Label } from '@patternfly/react-core';
import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';

export const LabelOutline: React.FunctionComponent = () => (
  <React.Fragment>
    <Label variant="outline">Grey</Label>{' '}
    <Label variant="outline" icon={<InfoCircleIcon />}>
      Grey icon
    </Label>{' '}
    <Label variant="outline" onClose={() => Function.prototype}>
      Grey removable
    </Label>{' '}
    <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
      Grey icon removable
    </Label>{' '}
    <Label variant="outline" href="#outline">
      Grey link
    </Label>{' '}
    <Label variant="outline" href="#outline" onClose={() => Function.prototype}>
      Grey link removable
    </Label>
    <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
      Grey label with icon that overflows
    </Label>
    <br />
    <br />
    <Label variant="outline" color="blue">
      Blue
    </Label>{' '}
    <Label variant="outline" color="blue" icon={<InfoCircleIcon />}>
      Blue icon
    </Label>{' '}
    <Label variant="outline" color="blue" onClose={() => Function.prototype}>
      Blue removable
    </Label>{' '}
    <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
      Blue icon removable
    </Label>{' '}
    <Label variant="outline" color="blue" href="#outline">
      Blue link
    </Label>{' '}
    <Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
      Blue link removable
    </Label>
    <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
      Blue label with icon that overflows
    </Label>
    <br />
    <br />
    <Label variant="outline" color="green">
      Green
    </Label>{' '}
    <Label variant="outline" color="green" icon={<InfoCircleIcon />}>
      Green icon
    </Label>{' '}
    <Label variant="outline" color="green" onClose={() => Function.prototype}>
      Green removable
    </Label>{' '}
    <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
      Green icon removable
    </Label>{' '}
    <Label variant="outline" color="green" href="#outline">
      Green link
    </Label>{' '}
    <Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
      Green link removable
    </Label>
    <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
      Green label with icon that overflows
    </Label>
    <br />
    <br />
    <Label variant="outline" color="orange">
      Orange
    </Label>{' '}
    <Label variant="outline" color="orange" icon={<InfoCircleIcon />}>
      Orange icon
    </Label>{' '}
    <Label variant="outline" color="orange" onClose={() => Function.prototype}>
      Orange removable
    </Label>{' '}
    <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
      Orange icon removable
    </Label>{' '}
    <Label variant="outline" color="orange" href="#outline">
      Orange link
    </Label>{' '}
    <Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
      Orange link removable
    </Label>
    <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
      Orange label with icon that overflows
    </Label>
    <br />
    <br />
    <Label variant="outline" color="red">
      Red
    </Label>{' '}
    <Label variant="outline" color="red" icon={<InfoCircleIcon />}>
      Red icon
    </Label>{' '}
    <Label variant="outline" color="red" onClose={() => Function.prototype}>
      Red removable
    </Label>{' '}
    <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
      Red icon removable
    </Label>{' '}
    <Label variant="outline" color="red" href="#outline">
      Red link
    </Label>{' '}
    <Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
      Red link removable
    </Label>
    <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
      Red label with icon that overflows
    </Label>
    <br />
    <br />
    <Label variant="outline" color="purple">
      Purple
    </Label>{' '}
    <Label variant="outline" color="purple" icon={<InfoCircleIcon />}>
      Purple icon
    </Label>{' '}
    <Label variant="outline" color="purple" onClose={() => Function.prototype}>
      Purple removable
    </Label>{' '}
    <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
      Purple icon removable
    </Label>{' '}
    <Label variant="outline" color="purple" href="#outline">
      Purple link
    </Label>{' '}
    <Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
      Purple link removable
    </Label>
    <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
      Purple label with icon that overflows
    </Label>
    <br />
    <br />
    <Label variant="outline" color="cyan">
      Cyan
    </Label>{' '}
    <Label variant="outline" color="cyan" icon={<InfoCircleIcon />}>
      Cyan icon
    </Label>{' '}
    <Label variant="outline" color="cyan" onClose={() => Function.prototype}>
      Cyan removable
    </Label>{' '}
    <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
      Cyan icon removable
    </Label>{' '}
    <Label variant="outline" color="cyan" href="#outline">
      Cyan link
    </Label>{' '}
    <Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
      Cyan link removable
    </Label>
    <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
      Cyan label with icon that overflows
    </Label>
    <br />
    <br />
    <Label variant="outline" color="gold">
      Gold
    </Label>{' '}
    <Label variant="outline" color="gold" icon={<InfoCircleIcon />}>
      Gold icon
    </Label>{' '}
    <Label variant="outline" color="gold" onClose={() => Function.prototype}>
      Gold removable
    </Label>{' '}
    <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
      Gold icon removable
    </Label>{' '}
    <Label variant="outline" color="gold" href="#outline">
      Gold link
    </Label>{' '}
    <Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
      Gold link removable
    </Label>
    <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
      Gold label with icon that overflows
    </Label>
  </React.Fragment>
);