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

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

export const ChevRightBold = ({ color, size = 16 }: ChevRightBoldProps) => {
    const { colors } = useTheme();
    const fill = color ?? colors.midnight200;

    return (
        <Svg
            width={size}
            height={size}
            viewBox="0 0 16 16"
            fill="none"
            testID="chevRightBoldIcon"
        >
            <Path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M5.29289 1.29289C5.68342 0.902369 6.31658 0.902369 6.70711 1.29289L12.7071 7.29289C12.8946 7.48043 13 7.73478 13 8C13 8.26522 12.8946 8.51957 12.7071 8.70711L6.70711 14.7071C6.31658 15.0976 5.68342 15.0976 5.29289 14.7071C4.90237 14.3166 4.90237 13.6834 5.29289 13.2929L10.5858 8L5.29289 2.70711C4.90237 2.31658 4.90237 1.68342 5.29289 1.29289Z"
                fill={fill}
            />
        </Svg>
    );
};

export default ChevRightBold;