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

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

export function RaceStats({ stats }: RaceStatsProps) {
  const mappedStats = [
    { label: 'Total', value: stats.total, icon: CalendarDays, intent: 'low' as const },
    { label: 'Scheduled', value: stats.scheduled, icon: Clock, intent: 'primary' as const },
    { label: 'Live Now', value: stats.running, icon: Zap, intent: 'success' as const },
    { label: 'Completed', value: stats.completed, icon: Trophy, intent: 'low' as const },
  ];

  return (
    <Box marginTop={6}>
      <StatGrid
        stats={mappedStats}
        columns={{ base: 2, md: 4 }}
        variant="box"
      />
    </Box>
  );
}