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

export const Smiles: React.FC<IconProps> = ({ colorVariant = 'body', ...props }) => {
  const { getIconColor } = useIcon();
  const color = useMemo(() => getIconColor(colorVariant), [getIconColor, colorVariant]);

  return (
    <Svg width="21" height="20" viewBox="0 0 21 20" fill="none" {...props}>
      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M0.611328 9.83569C0.611328 4.47404 4.95842 0.126953 10.3201 0.126953C15.6817 0.126953 20.0288 4.47404 20.0288 9.83569C20.0288 15.1973 15.6817 19.5444 10.3201 19.5444C4.95842 19.5444 0.611328 15.1973 0.611328 9.83569ZM2.22949 9.83475C2.22949 14.2959 5.85894 17.9254 10.3201 17.9254C14.7813 17.9254 18.4107 14.2959 18.4107 9.83475C18.4107 5.37359 14.7813 1.74414 10.3201 1.74414C5.85894 1.74414 2.22949 5.37359 2.22949 9.83475Z"
        fill={color}
      />
      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M5.65226 6.58931C5.94953 6.08346 6.49733 5.77817 7.0839 5.79143C7.96325 5.81132 8.66567 6.52998 8.66545 7.40954C8.66523 8.28911 7.96245 9.00742 7.0831 9.02687C6.49651 9.03984 5.94887 8.73427 5.65185 8.22827C5.35484 7.72228 5.35499 7.09515 5.65226 6.58931ZM12.1249 6.58931C12.4222 6.08346 12.97 5.77817 13.5566 5.79143C14.4359 5.81132 15.1383 6.52998 15.1381 7.40954C15.1379 8.28911 14.4351 9.00742 13.5558 9.02687C12.9692 9.03984 12.4215 8.73427 12.1245 8.22827C11.8275 7.72228 11.8276 7.09515 12.1249 6.58931ZM12.9351 12.2637C12.3744 13.2305 11.4221 13.8818 10.2255 13.8818C9.03052 13.8818 8.07745 13.2305 7.51758 12.2637H12.7474H12.9351ZM5.46582 10.6445H15.1746C15.1746 13.3255 13.0012 15.4989 10.3202 15.4989C7.6392 15.4989 5.46582 13.3255 5.46582 10.6445Z"
        fill={color}
      />
    </Svg>
  );
};
