'use client';

import Card from '../ui/Card';

interface PerformanceMetricsProps {
  stats: {
    winRate: number;
    podiumRate: number;
    dnfRate: number;
    avgFinish: number;
    consistency: number;
    bestFinish: number;
    worstFinish: number;
  };
}

export default function PerformanceMetrics({ stats }: PerformanceMetricsProps) {
  const getPerformanceColor = (value: number, type: 'rate' | 'finish' | 'consistency') => {
    if (type === 'rate') {
      if (value >= 30) return 'text-green-400';
      if (value >= 15) return 'text-warning-amber';
      return 'text-gray-300';
    }
    if (type === 'consistency') {
      if (value >= 80) return 'text-green-400';
      if (value >= 60) return 'text-warning-amber';
      return 'text-gray-300';
    }
    return 'text-white';
  };

  const metrics = [
    {
      label: 'Win Rate',
      value: `${stats.winRate.toFixed(1)}%`,
      color: getPerformanceColor(stats.winRate, 'rate'),
      icon: '🏆'
    },
    {
      label: 'Podium Rate',
      value: `${stats.podiumRate.toFixed(1)}%`,
      color: getPerformanceColor(stats.podiumRate, 'rate'),
      icon: '🥇'
    },
    {
      label: 'DNF Rate',
      value: `${stats.dnfRate.toFixed(1)}%`,
      color: stats.dnfRate < 10 ? 'text-green-400' : 'text-danger-red',
      icon: '❌'
    },
    {
      label: 'Avg Finish',
      value: stats.avgFinish.toFixed(1),
      color: 'text-white',
      icon: '📊'
    },
    {
      label: 'Consistency',
      value: `${stats.consistency.toFixed(0)}%`,
      color: getPerformanceColor(stats.consistency, 'consistency'),
      icon: '🎯'
    },
    {
      label: 'Best / Worst',
      value: `${stats.bestFinish} / ${stats.worstFinish}`,
      color: 'text-gray-300',
      icon: '📈'
    }
  ];

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
      {metrics.map((metric, index) => (
        <Card key={index} className="text-center">
          <div className="text-2xl mb-2">{metric.icon}</div>
          <div className="text-sm text-gray-400 mb-1">{metric.label}</div>
          <div className={`text-xl font-bold ${metric.color}`}>{metric.value}</div>
        </Card>
      ))}
    </div>
  );
}