import React from 'react';
import { Icon } from '../Icon/Icon';
import type { IconPropsWithoutChildren } from '../Icon/Icon';

export const EyeIcon = (props: IconPropsWithoutChildren) => {
  return (
    <Icon {...props}>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path d="M12 14.5C13.3807 14.5 14.5 13.3807 14.5 12C14.5 10.6193 13.3807 9.5 12 9.5C10.6193 9.5 9.5 10.6193 9.5 12C9.5 13.3807 10.6193 14.5 12 14.5Z" />
        <path
          fillRule="evenodd"
          d="M12 5C8.70123 5 6.21946 6.37976 4.57428 7.88785C3.75435 8.63944 3.13312 9.43033 2.71084 10.1165C2.49997 10.4592 2.33188 10.7868 2.21323 11.081C2.10598 11.3469 2 11.679 2 12C2 12.321 2.10598 12.6531 2.21323 12.919C2.33188 13.2132 2.49997 13.5408 2.71084 13.8835C3.13312 14.5697 3.75435 15.3606 4.57428 16.1122C6.21946 17.6202 8.70123 19 12 19C15.2988 19 17.7805 17.6202 19.4257 16.1122C20.2456 15.3606 20.8669 14.5697 21.2892 13.8835C21.5 13.5408 21.6681 13.2132 21.7868 12.919C21.894 12.6531 22 12.321 22 12C22 11.679 21.894 11.3469 21.7868 11.081C21.6681 10.7868 21.5 10.4592 21.2892 10.1165C20.8669 9.43033 20.2456 8.63944 19.4257 7.88785C17.7805 6.37976 15.2988 5 12 5ZM4.06802 12.1708C4.03445 12.0876 4.01707 12.0317 4.0082 12C4.01707 11.9683 4.03445 11.9124 4.06802 11.8292C4.13687 11.6585 4.25003 11.4314 4.41416 11.1647C4.74188 10.6322 5.24565 9.98556 5.92572 9.36215C7.28054 8.12024 9.29877 7 12 7C14.7012 7 16.7195 8.12024 18.0743 9.36215C18.7544 9.98556 19.2581 10.6322 19.5858 11.1647C19.75 11.4314 19.8631 11.6585 19.932 11.8292C19.9655 11.9124 19.9829 11.9683 19.9918 12C19.9829 12.0317 19.9655 12.0876 19.932 12.1708C19.8631 12.3415 19.75 12.5686 19.5858 12.8353C19.2581 13.3678 18.7544 14.0144 18.0743 14.6378C16.7195 15.8798 14.7012 17 12 17C9.29877 17 7.28054 15.8798 5.92572 14.6378C5.24565 14.0144 4.74188 13.3678 4.41416 12.8353C4.25003 12.5686 4.13687 12.3415 4.06802 12.1708Z"
          clipRule="evenodd"
        />
      </svg>
    </Icon>
  );
};