import Svg, { Circle } from 'react-native-svg';

export default function Rings(props: {
    strokeWidth: number; radius: number; color:string;
}) {
    const radius = props.radius || 80;
    const strokeWidth = props.strokeWidth || 10;
    const color = props.color || 'orange';
    // const strokeWidth = 10;
    const deg = 60;
    const circumference = 2 * Math.PI * radius;
    const arc = deg / 360 * circumference;
    // const halfCircumference = circumference / 2;

    return <Svg width={200} height={200} fillOpacity={0} stroke='pink'>
        <Circle
            cx={100}
            cy={100}
            r={radius}
            fillOpacity={0}
            stroke="lightgray"
            strokeWidth={strokeWidth}
            strokeLinecap="round"
        />
        <Circle
            cx={100}
            cy={100}
            r={radius}
            strokeWidth={strokeWidth}
            stroke={color}
            strokeOpacity="0.9"
            strokeDasharray={`${arc},502`}
            strokeLinecap="round"
            // transform="rotate(-90 100 100)"
        />
    </Svg>
}