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

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

  return (
    <Svg width="17" height="16" viewBox="0 0 17 16" fill="none" {...props}>
      <Path
        d="M13.375 3.99997C13.355 3.99997 13.335 4.01004 13.315 4.01498C13.29 4.01004 13.27 3.99997 13.25 3.99997H12.75V2.49997C12.75 2.22504 12.525 2 12.25 2H4.75C4.00998 2 3.39502 2.53998 3.27499 3.24997C3.25998 3.28998 3.25 3.32999 3.25 3.37503V12.625C3.25 13.385 3.86496 14 4.62503 14H13.375C13.58 14 13.75 13.83 13.75 13.625V4.37497C13.75 4.16998 13.58 3.99997 13.375 3.99997ZM8.5 12.25C6.70996 12.25 5.24997 10.79 5.24997 9.00003C5.24997 7.20999 6.70996 5.75 8.5 5.75C10.29 5.75 11.75 7.20999 11.75 9.00003C11.75 10.79 10.29 12.25 8.5 12.25ZM11.75 3.99997H4.75C4.47498 3.99997 4.25003 3.77502 4.25003 3.5C4.25003 3.22498 4.47498 3.00003 4.75 3.00003H11.75V3.99997Z"
        fill={color}
      />
      <Path
        d="M9.24997 10.25C9.12198 10.25 8.99399 10.201 8.89648 10.1035L8.14648 9.35355C8.05246 9.26007 8 9.133 8 9.00006V7.50006C8 7.22357 8.22394 7 8.49997 7C8.776 7 8.99994 7.22357 8.99994 7.50006V8.79306L9.60345 9.39658C9.79901 9.59204 9.79901 9.90799 9.60345 10.1035C9.50595 10.201 9.37796 10.25 9.24997 10.25Z"
        fill={color}
      />
    </Svg>
  );
};
