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) {
  return (
    <PageHero
      title={`${raceTrack || DEFAULT_RACE_TRACK} Results`}
    >
      <Stack gap={4}>
        <Stack direction="row" align="center" gap={4} wrap>
          {raceScheduledAt && (
            <Stack direction="row" align="center" gap={2}>
              <Icon icon={Calendar} size={4} intent="low" />
              <Text size="sm" variant="low">
                {new Date(raceScheduledAt).toLocaleDateString('en-US', {
                  weekday: 'short',
                  month: 'short',
                  day: 'numeric',
                })}
              </Text>
            </Stack>
          )}
          {totalDrivers !== undefined && totalDrivers !== null && (
            <Stack direction="row" align="center" gap={2}>
              <Icon icon={Users} size={4} intent="low" />
              <Text size="sm" variant="low">{totalDrivers} drivers classified</Text>
            </Stack>
          )}
          {leagueName && (
            <Text size="sm" variant="primary">{leagueName}</Text>
          )}
        </Stack>

        {raceSOF && (
          <Stack direction="row" align="center" gap={1.5}>
            <Icon icon={Zap} size={4} intent="warning" />
            <Text size="sm" variant="warning">SOF {raceSOF}</Text>
          </Stack>
        )}
      </Stack>
    </PageHero>
  );
}