'use client';

import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Calendar, ChevronLeft, MapPin } from 'lucide-react';
import { SessionStatusBadge, type SessionStatus } from './SessionStatusBadge';

interface RaceDetailsHeaderProps {
  title: string;
  leagueName: string;
  trackName: string;
  scheduledAt: string;
  status: SessionStatus;
  onBack: () => void;
}

export function RaceDetailsHeader({
  title,
  leagueName,
  trackName,
  scheduledAt,
  status,
  onBack,
}: RaceDetailsHeaderProps) {
  return (
    <Stack as="header" bg="bg-surface-charcoal" borderBottom borderColor="border-outline-steel" p={6}>
      <Stack gap={6}>
        <Stack 
          as="button" 
          onClick={onBack}
          display="flex"
          alignItems="center"
          gap={2}
          color="text-gray-500"
          hoverTextColor="text-primary-accent"
          transition
          group
        >
          <Icon icon={ChevronLeft} size={4} groupHoverScale />
          <Text size="xs" weight="bold" uppercase>Back to Schedule</Text>
        </Stack>

        <Stack direction="row" justifyContent="between" alignItems="end">
          <Stack gap={2}>
            <Text size="xs" color="text-primary-accent" weight="bold" uppercase>
              {leagueName}
            </Text>
            <Heading level={1}>{title}</Heading>
            
            <Stack display="flex" flexWrap="wrap" gap={6} mt={2}>
              <Stack direction="row" alignItems="center" gap={2}>
                <Icon icon={MapPin} size={4} color="#6b7280" />
                <Text size="sm" color="text-gray-300">{trackName}</Text>
              </Stack>
              <Stack direction="row" alignItems="center" gap={2}>
                <Icon icon={Calendar} size={4} color="#6b7280" />
                <Text size="sm" color="text-gray-300">{scheduledAt}</Text>
              </Stack>
            </Stack>
          </Stack>

          <Stack pb={2}>
            <SessionStatusBadge status={status} />
          </Stack>
        </Stack>
      </Stack>
    </Stack>
  );
}