export default function SegmentProgress({ value = 0, size = 64, stroke = 6, label, tone = 'cyan' }) {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const v = Math.max(0, Math.min(100, value));
  const offset = c - (v / 100) * c;
  const colors = { cyan: '#22d3ee', violet: '#a78bfa', amber: '#f59e0b', emerald: '#34d399', red: '#f87171' };
  const color = colors[tone] || colors.cyan;
  return (
    <div className="relative grid place-items-center" style={{ width: size, height: size }}>
      <svg width={size} height={size} className="-rotate-90">
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth={stroke} />
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={color} strokeWidth={stroke}
          strokeDasharray={c} strokeDashoffset={offset} strokeLinecap="round"
          style={{ transition: 'stroke-dashoffset 0.6s ease', filter: `drop-shadow(0 0 6px ${color}66)` }} />
      </svg>
      <div className="absolute text-center leading-none">
        <span className="mono text-sm font-semibold text-white">{Math.round(v)}<span className="text-[9px] text-slate-500">%</span></span>
        {label && <span className="block text-[9px] uppercase tracking-wider text-slate-500">{label}</span>}
      </div>
    </div>
  );
}