'use client';

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

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

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

  return (
    <Surface variant="muted" rounded="2xl" border padding={8} style={{ position: 'relative', overflow: 'hidden', backgroundColor: 'rgba(38, 38, 38, 0.3)' }}>
      {status === 'running' && (
        <Box style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '0.25rem', background: 'linear-gradient(to right, #10b981, rgba(16, 185, 129, 0.5), #10b981)' }} className="animate-pulse" />
      )}
      <DecorativeBlur color="blue" size="lg" position="top-right" opacity={5} />

      <Box style={{ position: 'relative', zIndex: 10 }}>
        <Stack direction="row" align="center" gap={3} mb={4}>
          <Badge variant={statusConfig.variant}>
            {status === 'running' && <Box style={{ width: '0.5rem', height: '0.5rem', borderRadius: '9999px', backgroundColor: '#10b981' }} className="animate-pulse" />}
            <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: '2rem', marginBottom: '0.5rem' }}>{track}</Heading>

        <Stack direction="row" align="center" gap={6} wrap className="text-gray-400">
          <Stack direction="row" align="center" gap={2}>
            <Icon icon={Calendar} size={4} />
            <Text>{new Date(scheduledAt).toLocaleDateString()}</Text>
          </Stack>
          <Stack direction="row" align="center" gap={2}>
            <Icon icon={Clock} size={4} />
            <Text>{new Date(scheduledAt).toLocaleTimeString()}</Text>
          </Stack>
          <Stack direction="row" align="center" gap={2}>
            <Icon icon={Car} size={4} />
            <Text>{car}</Text>
          </Stack>
        </Stack>
      </Box>
    </Surface>
  );
}