import { Card } from '@/components/ui/Card';
import { ProgressRing } from '@/components/ui/ProgressRing';
import { useCountUp } from '@/hooks/useCountUp';

interface WinRateRingProps {
  wins: number;
  losses: number;
}

export function WinRateRing({ wins, losses }: WinRateRingProps) {
  const total = wins + losses;
  const rate = total > 0 ? (wins / total) * 100 : 0;
  const animatedRate = useCountUp(Math.round(rate * 10) / 10);
  const color = rate >= 50 ? '#22C55E' : '#EF4444';

  return (
    <Card className="flex flex-col items-center">
      <p className="text-xs text-text-muted uppercase tracking-wider font-medium mb-3">Win Rate</p>
      <ProgressRing value={rate} size={100} strokeWidth={8} color={color}>
        <span className="text-xl font-mono font-bold text-text-primary">
          {animatedRate.toFixed(1)}%
        </span>
      </ProgressRing>
      <p className="text-sm text-text-secondary mt-3">
        <span className="text-green-400 font-medium">{wins}W</span>
        {' / '}
        <span className="text-red-400 font-medium">{losses}L</span>
      </p>
    </Card>
  );
}
