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

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

  return (
    <Svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
      <Path
        d="M2.375 3.75V10.375C2.375 13.4767 4.89832 16 8 16C11.1017 16 13.625 13.4767 13.625 10.375V4.0625C13.625 1.82239 11.8026 0 9.5625 0C7.32239 0 5.5 1.82239 5.5 4.0625V10.375C5.5 11.7535 6.62146 12.875 8 12.875C9.37854 12.875 10.5 11.7535 10.5 10.375V3.75C10.5 3.40479 10.2202 3.125 9.875 3.125C9.52979 3.125 9.25 3.40479 9.25 3.75V10.375C9.25 11.0642 8.68921 11.625 8 11.625C7.31079 11.625 6.75 11.0642 6.75 10.375V4.0625C6.75 2.51172 8.01172 1.25 9.5625 1.25C11.1133 1.25 12.375 2.51172 12.375 4.0625V10.375C12.375 12.7874 10.4124 14.75 8 14.75C5.58765 14.75 3.625 12.7874 3.625 10.375V3.75C3.625 3.40479 3.34521 3.125 3 3.125C2.65479 3.125 2.375 3.40479 2.375 3.75Z"
        fill={getIconColor(colorVariant)}
      />
    </Svg>
  );
};
