import { Icon } from '@/ui/Icon';
import { PageHero } from '@/ui/PageHero';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Calendar, Trophy, Users, Zap } from 'lucide-react';

interface RaceResultsHeaderProps {
  raceTrack: string | undefined;
  raceScheduledAt: string | undefined;
  totalDrivers: number | undefined;
  leagueName: string | undefined;
  raceSOF: number | null | undefined;
}

const DEFAULT_RACE_TRACK = 'Race';

export function RaceResultsHeader({
  raceTrack = 'Race',
  raceScheduledAt,
  totalDrivers,
  leagueName,
  raceSOF
}: RaceResultsHeaderProps) {
  const stats = [
    ...(raceScheduledAt ? [{
      icon: Calendar,
      value: new Date(raceScheduledAt).toLocaleDateString('en-US', {
        weekday: 'short',
        month: 'short',
        day: 'numeric',
      }),
      label: '',
      color: 'text-gray-400'
    }] : []),
    ...(totalDrivers !== undefined && totalDrivers !== null ? [{
      icon: Users,
      value: totalDrivers,
      label: 'drivers classified',
      color: 'text-gray-400'
    }] : []),
    ...(leagueName ? [{
      value: leagueName,
      label: '',
      color: 'text-primary-blue'
    }] : [])
  ];

  return (
    <PageHero
      title={`${raceTrack || DEFAULT_RACE_TRACK} Results`}
      icon={Trophy}
      stats={stats}
    >
      {raceSOF && (
        <Stack direction="row" align="center" gap={1.5} mt={4}>
          <Icon icon={Zap} size={4} color="text-warning-amber" />
          <Text size="sm" color="text-warning-amber">SOF {raceSOF}</Text>
        </Stack>
      )}
    </PageHero>
  );
}