'use client';

import React from 'react';
import { Clock, MapPin, Users } from 'lucide-react';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Icon } from '@/ui/Icon';
import { Box } from '@/ui/Box';
import { SessionStatusBadge, type SessionStatus } from './SessionStatusBadge';

interface RaceCardProps {
  id: string;
  title: string;
  leagueName: string;
  trackName: string;
  scheduledAt: string;
  entrantCount: number;
  status: SessionStatus;
  onClick: (id: string) => void;
}

export function RaceCard({
  id,
  title,
  leagueName,
  trackName,
  scheduledAt,
  entrantCount,
  status,
  onClick,
}: RaceCardProps) {
  return (
    <Box 
      as="article"
      onClick={() => onClick(id)}
      bg="bg-surface-charcoal"
      border
      borderColor="border-outline-steel"
      p={4}
      hoverBorderColor="border-primary-accent"
      transition
      cursor="pointer"
      position="relative"
      overflow="hidden"
      group
    >
      {/* Hover Glow */}
      <Box 
        position="absolute" 
        inset="0" 
        bg="bg-primary-accent" 
        bgOpacity={0.05} 
        opacity={0} 
        groupHoverOpacity={1} 
        transition 
      />
      
      <Stack gap={4}>
        <Stack direction="row" justifyContent="between" alignItems="start">
          <Stack gap={1}>
            <Text size="xs" color="text-gray-500" weight="bold" uppercase>
              {leagueName}
            </Text>
            <Text size="lg" weight="bold" groupHoverTextColor="text-primary-accent">
              {title}
            </Text>
          </Stack>
          <SessionStatusBadge status={status} />
        </Stack>

        <Box display="grid" gridCols={2} gap={4}>
          <Stack direction="row" alignItems="center" gap={2}>
            <Icon icon={MapPin} size={3} color="#6b7280" />
            <Text size="xs" color="text-gray-400">{trackName}</Text>
          </Stack>
          <Stack direction="row" alignItems="center" gap={2}>
            <Icon icon={Clock} size={3} color="#6b7280" />
            <Text size="xs" color="text-gray-400">{scheduledAt}</Text>
          </Stack>
        </Box>

        <Stack direction="row" alignItems="center" gap={2} pt={2} borderTop borderColor="border-outline-steel" bgOpacity={0.5}>
          <Icon icon={Users} size={3} color="#4ED4E0" />
          <Text size="xs" color="text-gray-400">
            <Text as="span" color="text-telemetry-aqua" weight="bold">{entrantCount}</Text> ENTRANTS
          </Text>
        </Stack>
      </Stack>
    </Box>
  );
}