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

interface DonutProps extends SvgProps {
    color?: string;
}

export const Donut = ({ color }: DonutProps) => {
    const { colors } = useTheme();

    return (
        <Svg width={12} height={12} viewBox="0 0 12 12" fill="none">
            <Path
                d="M6 10C8.20914 10 10 8.20914 10 6C10 3.79086 8.20914 2 6 2C3.79086 2 2 3.79086 2 6C2 8.20914 3.79086 10 6 10Z"
                fill={color || '#14979E'}
            />
            <Path
                d="M6 8C7.10457 8 8 7.10457 8 6C8 4.89543 7.10457 4 6 4C4.89543 4 4 4.89543 4 6C4 7.10457 4.89543 8 6 8Z"
                fill={colors.midnight950}
            />
        </Svg>
    );
};

export default Donut;