import { useIcon } from 'hooks';
import React from 'react';
import Svg, { Path } from 'react-native-svg';
import { IconProps } from './types';

export const SearchIcon: React.FC<IconProps> = ({ colorVariant = 'white', ...props }) => {
  const { getIconColor } = useIcon();
  return (
    <Svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
      <Path
        d="M14.4733 13.5269L12.5866 11.6469C13.6094 10.3833 14.1084 8.77548 13.9806 7.15489C13.8528 5.53429 13.108 4.02451 11.8998 2.93688C10.6916 1.84924 9.11217 1.26668 7.4871 1.30931C5.86203 1.35195 4.31528 2.01653 3.16578 3.16603C2.01629 4.31552 1.35171 5.86227 1.30907 7.48734C1.26643 9.11241 1.849 10.6919 2.93663 11.9001C4.02427 13.1083 5.53405 13.853 7.15464 13.9808C8.77524 14.1086 10.3831 13.6097 11.6466 12.5869L13.5266 14.4736C13.5886 14.536 13.6624 14.5856 13.7436 14.6195C13.8248 14.6533 13.912 14.6708 14 14.6708C14.088 14.6708 14.1751 14.6533 14.2564 14.6195C14.3376 14.5856 14.4113 14.536 14.4733 14.4736C14.5358 14.4116 14.5854 14.3378 14.6192 14.2566C14.6531 14.1754 14.6705 14.0882 14.6705 14.0002C14.6705 13.9122 14.6531 13.8251 14.6192 13.7438C14.5854 13.6626 14.5358 13.5889 14.4733 13.5269ZM2.66665 7.66689C2.66665 6.67798 2.95989 5.71128 3.5093 4.88904C4.0587 4.06679 4.8396 3.42593 5.75323 3.04749C6.66686 2.66905 7.67219 2.57004 8.6421 2.76296C9.612 2.95589 10.5029 3.43209 11.2022 4.13136C11.9014 4.83062 12.3776 5.72153 12.5706 6.69144C12.7635 7.66134 12.6645 8.66668 12.286 9.58031C11.9076 10.4939 11.2667 11.2748 10.4445 11.8242C9.62225 12.3736 8.65555 12.6669 7.66665 12.6669C6.34056 12.6669 5.06879 12.1401 4.13111 11.2024C3.19343 10.2647 2.66665 8.99297 2.66665 7.66689Z"
        fill={getIconColor(colorVariant)}
      />
    </Svg>
  );
};
