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

interface DoubleChevronProps {
    color?: string;
    width?: number;
    height?: number;
}

export const DoubleChevron = ({
    color,
    width = 12,
    height = 12
}: DoubleChevronProps) => {
    const { colors } = useTheme();
    const fill = color ?? colors.midnight200;

    return (
        <Svg
            width={width}
            height={height}
            viewBox="0 0 12 12"
            fill="none"
            testID="doubleChevronIcon"
        >
            <Path
                d="M3.70711 1.29289C3.31658 0.902369 2.68342 0.902369 2.29289 1.29289C1.90237 1.68342 1.90237 2.31658 2.29289 2.70711L5.29289 5.70711C5.68342 6.09763 6.31658 6.09763 6.70711 5.70711L9.70711 2.70711C10.0976 2.31658 10.0976 1.68342 9.70711 1.29289C9.31658 0.902369 8.68342 0.902369 8.29289 1.29289L6 3.58579L3.70711 1.29289Z"
                fill={fill}
            />
            <Path
                d="M3.70711 6.29289C3.31658 5.90237 2.68342 5.90237 2.29289 6.29289C1.90237 6.68342 1.90237 7.31658 2.29289 7.70711L5.29289 10.7071C5.68342 11.0976 6.31658 11.0976 6.70711 10.7071L9.70711 7.70711C10.0976 7.31658 10.0976 6.68342 9.70711 6.29289C9.31658 5.90237 8.68342 5.90237 8.29289 6.29289L6 8.58579L3.70711 6.29289Z"
                fill={fill}
            />
        </Svg>
    );
};

export default DoubleChevron;