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

export const Checkbox: React.FC<IconProps> = ({ colorVariant = 'body', ...props }) => {
  const { getIconColor } = useIcon();
  const color = useMemo(() => getIconColor(colorVariant), [getIconColor, colorVariant]);
  return (
    <Svg width="18" height="18" viewBox="0 0 18 18" fill="none" {...props}>
      <Path
        d="M3.75 15.75C3.3375 15.75 2.98425 15.6033 2.69025 15.3097C2.39675 15.0157 2.25 14.6625 2.25 14.25V3.75C2.25 3.3375 2.39675 2.98425 2.69025 2.69025C2.98425 2.39675 3.3375 2.25 3.75 2.25H14.25C14.6625 2.25 15.0157 2.39675 15.3097 2.69025C15.6033 2.98425 15.75 3.3375 15.75 3.75V14.25C15.75 14.6625 15.6033 15.0157 15.3097 15.3097C15.0157 15.6033 14.6625 15.75 14.25 15.75H3.75ZM3.75 14.25H14.25V3.75H3.75V14.25ZM7.95 11.8312C8.05 11.8312 8.14375 11.8158 8.23125 11.7847C8.31875 11.7533 8.4 11.7 8.475 11.625L12.7313 7.36875C12.8688 7.23125 12.9375 7.0625 12.9375 6.8625C12.9375 6.6625 12.8625 6.4875 12.7125 6.3375C12.575 6.2 12.4 6.13125 12.1875 6.13125C11.975 6.13125 11.8 6.2 11.6625 6.3375L7.95 10.05L6.31875 8.41875C6.18125 8.28125 6.0125 8.2125 5.8125 8.2125C5.6125 8.2125 5.4375 8.2875 5.2875 8.4375C5.15 8.575 5.08125 8.75 5.08125 8.9625C5.08125 9.175 5.15 9.35 5.2875 9.4875L7.425 11.625C7.5 11.7 7.58125 11.7533 7.66875 11.7847C7.75625 11.8158 7.85 11.8312 7.95 11.8312ZM3.75 14.25V3.75V14.25Z"
        fill={color}
      />
    </Svg>
  );
};
