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

interface StarProps {
    filled?: boolean;
    color?: string;
    size?: number;
}

const STARRED_PATH =
    'M17.4,21.2c-0.3,0-0.6-0.1-0.8-0.2l-4.5-2.9l-4.5,2.8c-0.5,0.3-1.2,0.3-1.7,0c-0.5-0.4-0.7-1-0.6-1.6l1.2-5.5 l-4-3.5C2.1,9.9,2,9.3,2.1,8.8c0.2-0.6,0.7-1,1.3-1l5.2-0.6l2-5.1c0.2-0.6,0.8-1,1.4-1c0.6,0,1.2,0.4,1.4,0.9c0,0,0,0,0,0l2.2,5.1 l5.3,0.5c0.6,0.1,1.1,0.5,1.3,1c0.2,0.6,0,1.2-0.4,1.6l-4,3.7l1.2,5.5c0.1,0.6-0.1,1.2-0.6,1.6C18,21.1,17.7,21.2,17.4,21.2z';

const NOT_STARRED_PATH =
    'M17.4,21.2c-0.3,0-0.6-0.1-0.8-0.2l-4.5-2.9l-4.5,2.8c-0.5,0.3-1.2,0.3-1.7,0c-0.5-0.4-0.7-1-0.6-1.6 l1.2-5.5l-4-3.5C2.1,9.9,2,9.3,2.1,8.8c0.2-0.6,0.7-1,1.3-1l5.2-0.6l2-5.1c0.2-0.6,0.8-1,1.4-1c0.6,0,1.2,0.4,1.4,0.9c0,0,0,0,0,0 l2.2,5.1l5.3,0.5c0.6,0.1,1.1,0.5,1.3,1c0.2,0.6,0,1.2-0.4,1.6l-4,3.7l1.2,5.5c0.1,0.6-0.1,1.2-0.6,1.6C18,21.1,17.7,21.2,17.4,21.2 z M12.1,15.8c0.4,0,0.7,0.1,1,0.3l3.3,2.1l-0.9-4.1c-0.1-0.7,0.1-1.4,0.6-1.8l3-2.7l-3.9-0.4c-0.7-0.1-1.3-0.5-1.6-1.2L12,4.3 L10.6,8c-0.3,0.7-0.9,1.1-1.6,1.2L5.2,9.7l3,2.6c0.5,0.5,0.7,1.2,0.6,1.8l-0.9,4l3.3-2.1C11.4,15.9,11.8,15.8,12.1,15.8z';

export const Star = ({ filled = false, color, size = 16 }: StarProps) => {
    const { colors } = useTheme();
    const resolvedColor = color ?? (filled ? colors.starred : colors.gray0);

    return (
        <Svg
            width={size}
            height={size}
            viewBox="0 0 24 24"
            fill="none"
            testID="starIcon"
        >
            <Path
                d={filled ? STARRED_PATH : NOT_STARRED_PATH}
                fill={resolvedColor}
            />
        </Svg>
    );
};

export default Star;