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

export const Question: React.FC<IconProps> = ({ colorVariant = 'white', ...props }) => {
  const { getIconColor } = useIcon();

  return (
    <Svg width="18" height="18" viewBox="0 0 18 18" fill="none" {...props}>
      <Path
        d="M9.74991 13.5C9.74991 13.9141 9.41414 14.2499 8.99995 14.2499C8.58577 14.2499 8.25 13.9141 8.25 13.5C8.25 13.0858 8.58577 12.75 8.99995 12.75C9.41414 12.75 9.74991 13.0858 9.74991 13.5Z"
        fill={getIconColor(colorVariant)}
      />
      <Path
        d="M9 18C4.0372 18 0 13.9628 0 9C0 4.0372 4.0372 0 9 0C13.9628 0 18 4.0372 18 9C18 13.9628 13.9628 18 9 18ZM9 1.125C4.65752 1.125 1.125 4.65752 1.125 9C1.125 13.3425 4.65752 16.875 9 16.875C13.3425 16.875 16.875 13.3425 16.875 9C16.875 4.65752 13.3425 1.125 9 1.125Z"
        fill={getIconColor(colorVariant)}
      />
      <Path
        d="M9.00005 11.0626C8.68954 11.0626 8.43755 10.8106 8.43755 10.5001V9.74258C8.43755 9.02861 8.89059 8.38879 9.56406 8.15108C10.4603 7.83536 11.0626 6.88051 11.0626 6.18755C11.0626 5.04977 10.1378 4.125 9.00005 4.125C7.86227 4.125 6.9375 5.04977 6.9375 6.18755C6.9375 6.49805 6.6855 6.75005 6.375 6.75005C6.0645 6.75005 5.8125 6.49805 5.8125 6.18755C5.8125 4.43028 7.2421 3 9.00005 3C10.758 3 12.1876 4.43028 12.1876 6.18755C12.1876 7.43861 11.1998 8.76686 9.93828 9.21236C9.71333 9.29105 9.56255 9.50473 9.56255 9.74327V10.5001C9.56255 10.8106 9.31055 11.0626 9.00005 11.0626V11.0626Z"
        fill={getIconColor(colorVariant)}
      />
    </Svg>
  );
};
