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

export const Text: 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="M17.2969 9.70312H11.6719C11.2835 9.70312 10.9688 10.0179 10.9688 10.4062V11.8125C10.9688 12.2008 11.2835 12.5156 11.6719 12.5156C12.0602 12.5156 12.375 12.2008 12.375 11.8125V11.1094H13.7812V15.3281H13.0781C12.6898 15.3281 12.375 15.6429 12.375 16.0312C12.375 16.4196 12.6898 16.7344 13.0781 16.7344H15.8906C16.279 16.7344 16.5938 16.4196 16.5938 16.0312C16.5938 15.6429 16.279 15.3281 15.8906 15.3281H15.1875V11.1094H16.5938V11.8125C16.5938 12.2008 16.9085 12.5156 17.2969 12.5156C17.6852 12.5156 18 12.2008 18 11.8125V10.4062C18 10.0179 17.6852 9.70312 17.2969 9.70312Z"
        fill={color}
      />
      <Path
        d="M10.4062 15.3281H9.70312V3.375C9.70312 2.9873 10.0185 2.67188 10.4062 2.67188H13.7812V3.375C13.7812 3.76334 14.096 4.07812 14.4844 4.07812C14.8727 4.07812 15.1875 3.76334 15.1875 3.375V1.96875C15.1875 1.58041 14.8727 1.26562 14.4844 1.26562H0.703125C0.314789 1.26562 0 1.58041 0 1.96875V3.375C0 3.76334 0.314789 4.07812 0.703125 4.07812C1.09146 4.07812 1.40625 3.76334 1.40625 3.375V2.67188H4.78125C5.16895 2.67188 5.48438 2.9873 5.48438 3.375V15.3281H4.78125C4.39291 15.3281 4.07812 15.6429 4.07812 16.0312C4.07812 16.4196 4.39291 16.7344 4.78125 16.7344H10.4062C10.7946 16.7344 11.1094 16.4196 11.1094 16.0312C11.1094 15.6429 10.7946 15.3281 10.4062 15.3281ZM6.76969 2.67188H8.41785C8.3398 2.89195 8.29691 3.12852 8.29691 3.375V15.3281H6.89066V3.375C6.89063 3.12852 6.84773 2.89195 6.76969 2.67188Z"
        fill={color}
      />
    </Svg>
  );
};