import React from 'react';
import { Flag, CalendarDays, Clock, Zap, Trophy } from 'lucide-react';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Hero } from '@/ui/Hero';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';
import { Icon } from '@/ui/Icon';
import { Grid } from '@/ui/Grid';
import { StatBox } from '@/ui/StatBox';

interface RacePageHeaderProps {
  totalCount: number;
  scheduledCount: number;
  runningCount: number;
  completedCount: number;
}

export function RacePageHeader({
  totalCount,
  scheduledCount,
  runningCount,
  completedCount,
}: RacePageHeaderProps) {
  return (
    <Hero variant="primary">
      <Stack gap={2}>
        <Stack direction="row" align="center" gap={3}>
          <Box p={2} bg="bg-primary-blue/10" rounded="lg">
            <Icon icon={Flag} size={6} color="rgb(59, 130, 246)" />
          </Box>
          <Heading level={1}>Race Calendar</Heading>
        </Stack>
        <Text color="text-gray-400" maxWidth="42rem">
          Track upcoming races, view live events, and explore results across all your leagues.
        </Text>
      </Stack>

      {/* Quick Stats */}
      <Grid cols={2} mdCols={4} gap={4} mt={6}>
        <StatBox icon={CalendarDays} label="Total" value={totalCount} />
        <StatBox icon={Clock} label="Scheduled" value={scheduledCount} color="rgb(59, 130, 246)" />
        <StatBox icon={Zap} label="Live Now" value={runningCount} color="rgb(16, 185, 129)" />
        <StatBox icon={Trophy} label="Completed" value={completedCount} />
      </Grid>
    </Hero>
  );
}