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

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

export const ChevRight = ({ color, size = 12 }: ChevRightProps) => {
    const { colors } = useTheme();
    const fill = color ?? colors.midnight200;

    return (
        <Svg
            width={size}
            height={size}
            viewBox="0 0 12 12"
            fill="none"
            testID="chevRightIcon"
        >
            <Path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M4.29289 2.29289C3.90237 2.68342 3.90237 3.31658 4.29289 3.70711L6.58579 6L4.29289 8.29289C3.90237 8.68342 3.90237 9.31658 4.29289 9.70711C4.68342 10.0976 5.31658 10.0976 5.70711 9.70711L8.70711 6.70711C9.09763 6.31658 9.09763 5.68342 8.70711 5.29289L5.70711 2.29289C5.31658 1.90237 4.68342 1.90237 4.29289 2.29289Z"
                fill={fill}
            />
        </Svg>
    );
};

export default ChevRight;