'use client';

import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Surface } from '@/ui/Surface';
import { Icon } from '@/ui/Icon';
import { Clock, MapPin, Car, ChevronRight } from 'lucide-react';
import { Button } from '@/ui/Button';
import Link from 'next/link';

interface NextUpRacePanelProps {
  race: any;
  onRaceClick: (id: string) => void;
}

export function NextUpRacePanel({ race, onRaceClick }: NextUpRacePanelProps) {
  if (!race) return null;

  return (
    <Stack gap={3}>
      <Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest" paddingX={1}>
        Next Up
      </Text>
      
      <Surface 
        as={Link}
        href={`/races/${race.id}`}
        variant="precision" 
        padding="lg"
        onClick={(e: React.MouseEvent) => {
          e.preventDefault();
          onRaceClick(race.id);
        }}
        cursor="pointer"
        hoverBg="rgba(255, 255, 255, 0.02)"
        display="block"
        style={{ textDecoration: 'none', color: 'inherit' }}
      >
        <Stack direction={{ base: 'col', md: 'row' }} justify="between" align={{ base: 'start', md: 'center' }} gap={6}>
          <Stack gap={4} flex={1}>
            <Stack gap={1}>
              <Text size="xs" variant="primary" weight="bold" uppercase letterSpacing="widest">
                {race.leagueName}
              </Text>
              <Text size="2xl" weight="bold">
                {race.track}
              </Text>
            </Stack>

            <Stack direction="row" gap={6} wrap>
              <Stack direction="row" align="center" gap={2}>
                <Icon icon={Clock} size={4} intent="low" />
                <Text size="sm" weight="medium">{race.timeLabel}</Text>
              </Stack>
              <Stack direction="row" align="center" gap={2}>
                <Icon icon={Car} size={4} intent="low" />
                <Text size="sm" weight="medium">{race.car}</Text>
              </Stack>
            </Stack>
          </Stack>

          <Button 
            variant="primary" 
            onClick={(e) => {
              e.stopPropagation();
              onRaceClick(race.id);
            }}
            icon={<Icon icon={ChevronRight} size={4} />}
          >
            View Details
          </Button>
        </Stack>
      </Surface>
    </Stack>
  );
}