'use client';

import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { Clock, MapPin } from 'lucide-react';

interface RaceEvent {
  id: string;
  title: string;
  trackName: string;
  date: string;
  time: string;
  status: 'upcoming' | 'live' | 'completed';
}

interface LeagueSchedulePanelProps {
  events: RaceEvent[];
}

export function LeagueSchedulePanel({ events }: LeagueSchedulePanelProps) {
  return (
    <Stack as="section">
      <Stack gap={4}>
        {events.map((event) => (
          <Stack 
            as="article"
            key={event.id}
            display="flex"
            alignItems="center"
            gap={6}
            p={4}
            border
            borderColor="zinc-800"
            bg="zinc-900/50"
            hoverBorderColor="zinc-700"
            transition
          >
            <Stack display="flex" flexDirection="col" alignItems="center" justifyContent="center" w="16" h="16" borderRight borderColor="zinc-800" pr={6}>
              <Text size="xs" weight="bold" color="text-zinc-500" uppercase>
                {new Date(event.date).toLocaleDateString('en-US', { month: 'short' })}
              </Text>
              <Text size="2xl" weight="bold" color="text-white">
                {new Date(event.date).toLocaleDateString('en-US', { day: 'numeric' })}
              </Text>
            </Stack>

            <Stack flexGrow={1}>
              <Heading level={3} fontSize="lg" weight="bold" color="text-white">{event.title}</Heading>
              <Stack direction="row" gap={4} mt={1}>
                <Stack display="flex" alignItems="center" gap={1.5}>
                  <Stack color="text-zinc-600"><MapPin size={14} /></Stack>
                  <Text size="sm" color="text-zinc-400">{event.trackName}</Text>
                </Stack>
                <Stack display="flex" alignItems="center" gap={1.5}>
                  <Stack color="text-zinc-600"><Clock size={14} /></Stack>
                  <Text size="sm" color="text-zinc-400">{event.time}</Text>
                </Stack>
              </Stack>
            </Stack>

            <Stack display="flex" alignItems="center" gap={3}>
              {event.status === 'live' && (
                <Stack display="flex" alignItems="center" gap={1.5} px={2} py={1} bg="red-500/10" border borderColor="red-500/20">
                  <Stack w="1.5" h="1.5" rounded="full" bg="bg-red-500" animate="pulse" />
                  <Text size="xs" weight="bold" color="text-red-500" uppercase letterSpacing="0.05em">
                    Live
                  </Text>
                </Stack>
              )}
              {event.status === 'upcoming' && (
                <Stack px={2} py={1} bg="blue-500/10" border borderColor="blue-500/20">
                  <Text size="xs" weight="bold" color="text-blue-500" uppercase letterSpacing="0.05em">
                    Upcoming
                  </Text>
                </Stack>
              )}
              {event.status === 'completed' && (
                <Stack px={2} py={1} bg="zinc-800" border borderColor="zinc-700">
                  <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="0.05em">
                    Results
                  </Text>
                </Stack>
              )}
            </Stack>
          </Stack>
        ))}
      </Stack>
    </Stack>
  );
}