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

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

export const ChevDown = ({ color, size = 12 }: ChevDownProps) => {
    const { colors } = useTheme();
    const stroke = color ?? colors.midnight200;

    return (
        <Svg
            width={size}
            height={size}
            viewBox="0 0 12 12"
            fill="none"
            testID="chevDownIcon"
        >
            <Path
                d="M2.5 4.5L6 8L9.5 4.5"
                stroke={stroke}
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
            />
        </Svg>
    );
};

export default ChevDown;