import React, { FC } from 'react';

import { RemovableChipData } from './chip.interface';

interface Props {
  value: RemovableChipData;
}

const CloseIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
  >
    <path
      fill="currentColor"
      // tslint:disable-next-line:max-line-length
      d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
    />
    <path
      d="M0 0h24v24H0z"
      fill="none"
    />
  </svg>
)

const SampleChip: FC<Props> = ({ value }) => {
  const removeThisChip = () => value.onRemove(value);
  return (
    <div className="chip">{value.name}
      <div className="remove" onClick={removeThisChip}>
        <CloseIcon />
      </div>
    </div>
  );
};

export default SampleChip;