import { Badge } from '@/ui/Badge';
import { Heading } from '@/ui/Heading';
import { Hero } from '@/ui/Hero';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Calendar, Car, Clock, LucideIcon } from 'lucide-react';

interface RaceHeroProps {
  track: string;
  formattedDate: string;
  formattedTime: string;
  car: string;
  status: 'scheduled' | 'running' | 'completed' | 'cancelled';
  statusConfig: {
    icon: LucideIcon;
    variant: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
    label: string;
  };
}

export function RaceHero({ track, formattedDate, formattedTime, car, status, statusConfig }: RaceHeroProps) {
  const StatusIcon = statusConfig.icon;

  return (
    <Hero variant="primary">
      {status === 'running' && (
        <Stack 
          position="absolute" 
          top="0" 
          left="0" 
          right="0" 
          h="1" 
          style={{ background: 'linear-gradient(to right, #10b981, rgba(16, 185, 129, 0.5), #10b981)' }} 
          animate="pulse"
        />
      )}

      <Stack gap={4}>
        <Stack direction="row" align="center" gap={3}>
          <Badge variant={statusConfig.variant}>
            {status === 'running' && (
              <Stack w="2" h="2" bg="bg-performance-green" rounded="full" animate="pulse" mr={1.5} />
            )}
            <Icon icon={StatusIcon} size={4} />
            {statusConfig.label}
          </Badge>
          {status === 'scheduled' && (
            <Text size="sm" color="text-gray-400">
              Starts in <Text color="text-white" weight="medium">TBD</Text>
            </Text>
          )}
        </Stack>

        <Heading level={1} style={{ fontSize: '2.5rem' }}>{track}</Heading>

        <Stack direction="row" align="center" gap={6} wrap>
          <Stack direction="row" align="center" gap={2}>
            <Icon icon={Calendar} size={4} color="rgb(156, 163, 175)" />
            <Text color="text-gray-400">{formattedDate}</Text>
          </Stack>
          <Stack direction="row" align="center" gap={2}>
            <Icon icon={Clock} size={4} color="rgb(156, 163, 175)" />
            <Text color="text-gray-400">{formattedTime}</Text>
          </Stack>
          <Stack direction="row" align="center" gap={2}>
            <Icon icon={Car} size={4} color="rgb(156, 163, 175)" />
            <Text color="text-gray-400">{car}</Text>
          </Stack>
        </Stack>
      </Stack>
    </Hero>
  );
}