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

export const Calendar: React.FC<IconProps> = ({ colorVariant = 'body', ...props }) => {
  const { getIconColor } = useIcon();
  return (
    <Svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...props}>
      <Path
        d="M11.297 1.07821H10.7748V0.549805C10.7748 0.247901 10.5301 0.00317383 10.2282 0.00317383C9.92631 0.00317383 9.68158 0.247901 9.68158 0.549805V1.07821H4.31839V0.549805C4.31839 0.247901 4.07366 0.00317383 3.77176 0.00317383C3.46985 0.00317383 3.22513 0.247901 3.22513 0.549805V1.07821H2.70296C1.21254 1.07821 0 2.29074 0 3.78113V11.294C0 12.7844 1.21254 13.9969 2.70296 13.9969H11.2971C12.7875 13.9969 14 12.7844 14 11.294V3.78113C14 2.29074 12.7875 1.07821 11.297 1.07821ZM2.70296 2.17147H3.22513V3.2374C3.22513 3.5393 3.46985 3.78403 3.77176 3.78403C4.07366 3.78403 4.31839 3.5393 4.31839 3.2374V2.17147H9.68161V3.2374C9.68161 3.5393 9.92634 3.78403 10.2282 3.78403C10.5301 3.78403 10.7749 3.5393 10.7749 3.2374V2.17147H11.2971C12.1846 2.17147 12.9067 2.89357 12.9067 3.78113V4.30333H1.09326V3.78113C1.09326 2.89357 1.81536 2.17147 2.70296 2.17147ZM11.297 12.9037H2.70296C1.81536 12.9037 1.09326 12.1816 1.09326 11.294V5.39659H12.9067V11.294C12.9067 12.1816 12.1846 12.9037 11.297 12.9037Z"
        fill={getIconColor(colorVariant)}
      />
    </Svg>
  );
};
