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

export const Trash: React.FC<IconProps> = ({ colorVariant = 'secondary', ...props }) => {
  const { getIconColor } = useIcon();
  return (
    <Svg width="17" height="17" viewBox="0 0 17 17" fill="none" {...props}>
      <Path
        d="M14.8539 2.52344H11.9814L10.907 0.367828C10.7946 0.14241 10.5646 0 10.3127 0H6.69938C6.44763 0 6.21741 0.14241 6.10509 0.367828L5.03066 2.52344H2.1582C1.79141 2.52344 1.49414 2.82071 1.49414 3.1875C1.49414 3.55429 1.79141 3.85156 2.1582 3.85156H14.8539C15.2206 3.85156 15.5179 3.55429 15.5179 3.1875C15.5179 2.82071 15.2206 2.52344 14.8539 2.52344ZM6.51469 2.52344L7.1104 1.32812H9.90166L10.4974 2.52344H6.51469Z"
        fill={getIconColor(colorVariant)}
      />
      <Path
        d="M13.8186 5.04688H3.19356C2.78487 5.04688 2.47191 5.41341 2.53818 5.8182L4.27603 16.4432C4.32843 16.7642 4.60599 17 4.93128 17H12.0807C12.4061 17 12.6836 16.7642 12.736 16.4432L14.4738 5.8182C14.5401 5.41315 14.227 5.04688 13.8186 5.04688ZM11.5164 15.6719H5.4956L3.975 6.375H13.037L11.5164 15.6719Z"
        fill={getIconColor(colorVariant)}
      />
    </Svg>
  );
};
