import { View, Text } from '@tarojs/components';
import './ProgressRing.scss';

interface ProgressRingProps {
  percent: number;
  size?: number;
  strokeWidth?: number;
  color?: string;
  trackColor?: string;
}

export default function ProgressRing({
  percent,
  size = 72,
  strokeWidth = 7,
  color = '#C4623A',
  trackColor = '#E8E2DC',
}: ProgressRingProps) {
  const clamped = Math.max(0, Math.min(100, percent));
  const innerSize = size - strokeWidth * 2;

  return (
    <View
      className='progress-ring'
      style={`width:${size}px;height:${size}px;background:conic-gradient(${color} ${clamped}%, ${trackColor} ${clamped}%);border-radius:50%;padding:${strokeWidth}px;`}
    >
      <View
        className='progress-ring-inner'
        style={`width:${innerSize}px;height:${innerSize}px;`}
      >
        <Text className='progress-ring-percent' style={`color:${color};`}>
          {clamped}
        </Text>
        <Text className='progress-ring-unit' style={`color:${color};`}>
          %
        </Text>
      </View>
    </View>
  );
}