import { CalendarDays, Clock, Zap, Trophy } from 'lucide-react';

interface RaceStatsProps {
  stats: {
    total: number;
    scheduled: number;
    running: number;
    completed: number;
  };
  className?: string;
}

export function RaceStats({ stats, className }: RaceStatsProps) {
  return (
    <div className={`relative z-10 grid grid-cols-2 md:grid-cols-4 gap-4 mt-6 ${className || ''}`}>
      <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
        <div className="flex items-center gap-2 text-gray-400 text-sm mb-1">
          <CalendarDays className="w-4 h-4" />
          <span>Total</span>
        </div>
        <p className="text-2xl font-bold text-white">{stats.total}</p>
      </div>
      <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
        <div className="flex items-center gap-2 text-primary-blue text-sm mb-1">
          <Clock className="w-4 h-4" />
          <span>Scheduled</span>
        </div>
        <p className="text-2xl font-bold text-white">{stats.scheduled}</p>
      </div>
      <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
        <div className="flex items-center gap-2 text-performance-green text-sm mb-1">
          <Zap className="w-4 h-4" />
          <span>Live Now</span>
        </div>
        <p className="text-2xl font-bold text-white">{stats.running}</p>
      </div>
      <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
        <div className="flex items-center gap-2 text-gray-400 text-sm mb-1">
          <Trophy className="w-4 h-4" />
          <span>Completed</span>
        </div>
        <p className="text-2xl font-bold text-white">{stats.completed}</p>
      </div>
    </div>
  );
}