import React from 'react';
import { Flag, CalendarDays, Clock, Zap, Trophy, LucideIcon } 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';

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 style={{ padding: '0.5rem', backgroundColor: 'rgba(59, 130, 246, 0.1)', borderRadius: '0.5rem' }}>
            <Flag style={{ width: '1.5rem', height: '1.5rem', color: '#3b82f6' }} />
          </Box>
          <Heading level={1}>Race Calendar</Heading>
        </Stack>
        <Text color="text-gray-400" style={{ maxWidth: '42rem' }}>
          Track upcoming races, view live events, and explore results across all your leagues.
        </Text>
      </Stack>

      {/* Quick Stats */}
      <Box style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '1rem', marginTop: '1.5rem' }}>
        <StatBox icon={CalendarDays} label="Total" value={totalCount} />
        <StatBox icon={Clock} label="Scheduled" value={scheduledCount} color="#3b82f6" />
        <StatBox icon={Zap} label="Live Now" value={runningCount} color="#10b981" />
        <StatBox icon={Trophy} label="Completed" value={completedCount} />
      </Box>
    </Hero>
  );
}

function StatBox({ icon: Icon, label, value, color }: { icon: LucideIcon, label: string, value: number, color?: string }) {
  return (
    <Box style={{ backgroundColor: 'rgba(15, 17, 21, 0.6)', backdropFilter: 'blur(8px)', borderRadius: '0.75rem', padding: '1rem', border: '1px solid rgba(38, 38, 38, 0.5)' }}>
      <Stack gap={1}>
        <Stack direction="row" align="center" gap={2}>
          <Icon style={{ width: '1rem', height: '1rem', color: color || '#9ca3af' }} />
          <Text size="sm" color="text-gray-400">{label}</Text>
        </Stack>
        <Text size="2xl" weight="bold" color="text-white">{value}</Text>
      </Stack>
    </Box>
  );
}