import React from 'react';
import { convertIcon, IconSize } from '../component/Icon';

function SvgComponent({
  size = '24',
  color = '#616161',
  ...rest
}: React.SVGProps<SVGSVGElement> & IconSize) {
  if (size === '16') {
    return (
      <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14C11.3137 14 14 11.3137 14 8ZM5.97752 10.7013C5.79006 10.8888 5.48612 10.8888 5.29866 10.7013C5.1112 10.5138 5.1112 10.2099 5.29866 10.0224L7.32119 7.99998L5.29866 5.97753C5.1112 5.79006 5.1112 5.48613 5.29866 5.29866C5.48612 5.1112 5.79006 5.1112 5.97752 5.29866L8.00002 7.32115L10.0225 5.29868C10.21 5.11122 10.5139 5.11122 10.7014 5.29868C10.8888 5.48614 10.8888 5.79008 10.7014 5.97754L8.67884 7.99998L10.7013 10.0225C10.8888 10.2099 10.8888 10.5139 10.7013 10.7013C10.5139 10.8888 10.2099 10.8888 10.0225 10.7013L8.00002 8.6788L5.97752 10.7013Z"
          fill={color}
        />
      </svg>
    );
  }
  if (size === '20') {
    return (
      <svg
        width="20"
        height="20"
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M3.15746 3.15746C3.36741 2.94751 3.7078 2.94751 3.91774 3.15746L10 9.23972L16.0823 3.15746C16.2922 2.94751 16.6326 2.94751 16.8425 3.15746C17.0525 3.36741 17.0525 3.7078 16.8425 3.91774L10.7603 10L16.8425 16.0823C17.0525 16.2922 17.0525 16.6326 16.8425 16.8425C16.6326 17.0525 16.2922 17.0525 16.0823 16.8425L9.99924 10.7595L3.91774 16.8425C3.7078 17.0525 3.36741 17.0525 3.15746 16.8425C2.94751 16.6326 2.94751 16.2922 3.15746 16.0823L9.23896 9.99924L3.15746 3.91774C2.94751 3.7078 2.94751 3.36741 3.15746 3.15746Z"
          fill={color}
        />
      </svg>
    );
  }

  if (size === '40') {
    return (
      <svg
        width="40"
        height="40"
        viewBox="0 0 40 40"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M4.15625 4.15625C4.36459 3.94792 4.70238 3.94792 4.91072 4.15625L19.9985 19.2455L35.0893 4.15625C35.2976 3.94792 35.6354 3.94792 35.8437 4.15625C36.0521 4.36459 36.0521 4.70238 35.8437 4.91072L20.753 20L35.8437 35.0893C36.0521 35.2976 36.0521 35.6354 35.8437 35.8437C35.6354 36.0521 35.2976 36.0521 35.0893 35.8437L19.9985 20.7545L4.91072 35.8437C4.70238 36.0521 4.36459 36.0521 4.15625 35.8437C3.94792 35.6354 3.94792 35.2976 4.15625 35.0893L19.244 20L4.15625 4.91072C3.94792 4.70238 3.94792 4.36459 4.15625 4.15625Z"
          fill={color}
        />
      </svg>
    );
  }
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M20.8473 3.15269C21.0509 3.35629 21.0509 3.68638 20.8473 3.88997L12.7373 12L20.8473 20.11C21.0509 20.3136 21.0509 20.6437 20.8473 20.8473C20.6437 21.0509 20.3136 21.0509 20.11 20.8473L12 12.7373L3.88997 20.8473C3.68638 21.0509 3.35629 21.0509 3.15269 20.8473C2.9491 20.6437 2.9491 20.3136 3.15269 20.11L11.2627 12L3.15269 3.88997C2.9491 3.68638 2.9491 3.35629 3.15269 3.15269C3.35629 2.9491 3.68638 2.9491 3.88997 3.15269L12 11.2627L20.11 3.15269C20.3136 2.9491 20.6437 2.9491 20.8473 3.15269Z"
        fill={color}
      />
    </svg>
  );
}

const IconComponent = convertIcon(SvgComponent, 'close');
export default IconComponent;