import { Calendar, ChevronRight, Clock } from 'lucide-react';
import { Badge } from './Badge';
import { Box } from './Box';
import { Button } from './Button';
import { Heading } from './Heading';
import { Icon } from './Icon';
import { Link } from './Link';
import { Stack } from './Stack';
import { Surface } from './Surface';
import { Text } from './Text';

interface NextRaceCardProps {
  track: string;
  car: string;
  formattedDate: string;
  formattedTime: string;
  timeUntil: string;
  isMyLeague: boolean;
  href: string;
}

export function NextRaceCard({
  track,
  car,
  formattedDate,
  formattedTime,
  timeUntil,
  isMyLeague,
  href,
}: NextRaceCardProps) {
  return (
    <Surface
      variant="muted"
      rounded="xl"
      border
      padding={6}
      style={{
        position: 'relative',
        overflow: 'hidden',
        background: 'linear-gradient(to bottom right, #262626, rgba(38, 38, 38, 0.8))',
        borderColor: 'rgba(59, 130, 246, 0.3)',
      }}
    >
      <Box
        position="absolute"
        top="0"
        right="0"
        w="40"
        h="40"
        style={{
          background: 'linear-gradient(to bottom left, rgba(59, 130, 246, 0.2), transparent)',
          borderBottomLeftRadius: '9999px',
        }}
      />
      <Box position="relative">
        <Stack direction="row" align="center" gap={2} mb={4}>
          <Badge variant="primary" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>
            Next Race
          </Badge>
          {isMyLeague && (
            <Badge variant="success">
              Your League
            </Badge>
          )}
        </Stack>

        <Stack direction="row" align="end" justify="between" wrap gap={4}>
          <Box>
            <Heading level={2} style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>
              {track}
            </Heading>
            <Text color="text-gray-400" block mb={3}>
              {car}
            </Text>
            <Stack direction="row" align="center" gap={4}>
              <Stack direction="row" align="center" gap={1.5}>
                <Icon icon={Calendar} size={4} color="var(--text-gray-500)" />
                <Text size="sm" color="text-gray-400">
                  {formattedDate}
                </Text>
              </Stack>
              <Stack direction="row" align="center" gap={1.5}>
                <Icon icon={Clock} size={4} color="var(--text-gray-500)" />
                <Text size="sm" color="text-gray-400">
                  {formattedTime}
                </Text>
              </Stack>
            </Stack>
          </Box>

          <Stack align="end" gap={3}>
            <Box textAlign="right">
              <Text
                size="xs"
                color="text-gray-500"
                style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}
                block
                mb={1}
              >
                Starts in
              </Text>
              <Text size="3xl" weight="bold" color="text-primary-blue" font="mono">
                {timeUntil}
              </Text>
            </Box>
            <Box>
              <Link href={href}>
                <Button
                  variant="primary"
                  icon={<Icon icon={ChevronRight} size={4} />}
                >
                  View Details
                </Button>
              </Link>
            </Box>
          </Stack>
        </Stack>
      </Box>
    </Surface>
  );
}