import React from 'react';
import { Box } from './Box';
import { Text } from './Text';
import { Stack } from './Stack';
import { RaceStatusBadge } from './RaceStatusBadge';
import { Icon } from './Icon';
import { Calendar, MapPin, Car } from 'lucide-react';

interface RaceHeaderPanelProps {
  track: string;
  car: string;
  scheduledAt: string;
  status: string;
  leagueName?: string;
  actions?: React.ReactNode;
}

export function RaceHeaderPanel({
  track,
  car,
  scheduledAt,
  status,
  leagueName,
  actions
}: RaceHeaderPanelProps) {
  return (
    <Box 
      bg="bg-panel-gray" 
      rounded="xl" 
      border 
      borderColor="border-charcoal-outline" 
      overflow="hidden"
      position="relative"
    >
      {/* Background Accent */}
      <Box 
        position="absolute" 
        top={0} 
        left={0} 
        right={0} 
        height="24" 
        bg="bg-gradient-to-r from-primary-blue/20 to-transparent"
        opacity={0.5}
      />

      <Box p={6} position="relative">
        <Stack direction={{ base: 'col', md: 'row' }} gap={6} align="start" className="md:items-center">
          {/* Info */}
          <Box flexGrow={1}>
            <Stack gap={3}>
              <Stack direction="row" align="center" gap={3} wrap>
                <Text as="h1" size="3xl" weight="bold" color="text-white">
                  {track}
                </Text>
                <RaceStatusBadge status={status} />
              </Stack>
              
              <Stack direction="row" align="center" gap={6} wrap>
                <Stack direction="row" align="center" gap={2}>
                  <Icon icon={Car} size={4} color="#9ca3af" />
                  <Text size="sm" color="text-gray-400">
                    {car}
                  </Text>
                </Stack>

                <Stack direction="row" align="center" gap={2}>
                  <Icon icon={Calendar} size={4} color="#9ca3af" />
                  <Text size="sm" color="text-gray-400">
                    {scheduledAt}
                  </Text>
                </Stack>

                {leagueName && (
                  <Stack direction="row" align="center" gap={2}>
                    <Icon icon={MapPin} size={4} color="#9ca3af" />
                    <Text size="sm" color="text-gray-400">
                      {leagueName}
                    </Text>
                  </Stack>
                )}
              </Stack>
            </Stack>
          </Box>

          {/* Actions */}
          {actions && (
            <Box flexShrink={0} width={{ base: 'full', md: 'auto' }}>
              {actions}
            </Box>
          )}
        </Stack>
      </Box>
    </Box>
  );
}