import React from 'react';
import { Path, Svg } from 'react-native-svg';
import { useTheme } from '../../../branding';

interface FilterIconProps {
    color?: string;
    size?: number;
}

export const Filter = ({ color, size = 16 }: FilterIconProps) => {
    const { colors } = useTheme();
    const fill = color ?? colors.midnight850;

    return (
        <Svg
            width={size}
            height={size}
            viewBox="0 0 16 16"
            fill="none"
            testID="filterIcon"
        >
            <Path
                d="M1 3C1 2.44772 1.44772 2 2 2H14C14.5523 2 15 2.44772 15 3V3.58579C15 3.851 14.8946 4.10536 14.7071 4.29289L10.2929 8.70711C10.1054 8.89464 10 9.149 10 9.41421V14C10 14.824 9.05924 15.2944 8.4 14.8L6.4 13.3C6.14819 13.1111 6 12.8148 6 12.5V9.41421C6 9.149 5.89464 8.89464 5.70711 8.70711L1.29289 4.29289C1.10536 4.10536 1 3.851 1 3.58579V3Z"
                fill={fill}
            />
        </Svg>
    );
};

export default Filter;