import React from 'react';
import { CalendarDays, Clock, Zap, Trophy } from 'lucide-react';
import { Box } from '@/ui/Box';
import { StatGridItem } from '@/ui/StatGridItem';

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

export function RaceStats({ stats }: RaceStatsProps) {
  return (
    <Box display="grid" gridCols={{ base: 2, md: 4 }} gap={4} mt={6}>
      <StatGridItem
        label="Total"
        value={stats.total}
        icon={CalendarDays}
        color="text-gray-400"
      />
      <StatGridItem
        label="Scheduled"
        value={stats.scheduled}
        icon={Clock}
        color="text-primary-blue"
      />
      <StatGridItem
        label="Live Now"
        value={stats.running}
        icon={Zap}
        color="text-performance-green"
      />
      <StatGridItem
        label="Completed"
        value={stats.completed}
        icon={Trophy}
        color="text-gray-400"
      />
    </Box>
  );
}