'use client';

import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Grid } from '@/ui/Grid';
import { Stack } from '@/ui/Stack';
import { Panel } from '@/ui/Panel';
import { Text } from '@/ui/Text';
import { CalendarDays, Clock, Flag, LucideIcon, Trophy, Zap } from 'lucide-react';

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

export function RacePageHeader({
  totalCount,
  scheduledCount,
  runningCount,
  completedCount,
}: RacePageHeaderProps) {
  return (
    <Panel 
      variant="precision"
      padding="lg"
    >
      <Stack gap={8}>
        <Stack gap={2}>
          <Stack direction="row" align="center" gap={3}>
            <Icon icon={Flag} size={6} intent="primary" />
            <Heading level={1} uppercase weight="bold">Race Dashboard</Heading>
          </Stack>
          <Text variant="low" size="sm">
            Precision tracking for upcoming sessions and live events.
          </Text>
        </Stack>

        <Grid cols={2} mdCols={4} gap={6}>
          <StatItem icon={CalendarDays} label="Total Sessions" value={totalCount} />
          <StatItem icon={Clock} label="Scheduled" value={scheduledCount} variant="primary" />
          <StatItem icon={Zap} label="Live Now" value={runningCount} variant="success" />
          <StatItem icon={Trophy} label="Completed" value={completedCount} variant="low" />
        </Grid>
      </Stack>
    </Panel>
  );
}

function StatItem({ 
  icon, 
  label, 
  value, 
  variant = 'high' 
}: { 
  icon: LucideIcon, 
  label: string, 
  value: number, 
  variant?: 'high' | 'low' | 'primary' | 'success' | 'warning' | 'critical' 
}) {
  return (
    <Stack gap={2}>
      <Stack direction="row" align="center" gap={2}>
        <Icon icon={icon} size={3} intent={variant === 'high' ? 'low' : variant} />
        <Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest">{label}</Text>
      </Stack>
      <Text size="3xl" weight="bold" variant={variant} mono>{value}</Text>
    </Stack>
  );
}