gridpilot.gg/apps/website/ui/LeagueCard.tsx

import { ReactNode } from 'react';
import { Box } from './Box';
import { Heading } from './Heading';
import { Icon } from './Icon';
import { Text } from './Text';
import { Stack } from './Stack';
import { Image } from './Image';
import { PlaceholderImage } from './PlaceholderImage';
import { Calendar as LucideCalendar, ChevronRight as LucideChevronRight, Users as LucideUsers } from 'lucide-react';

interface LeagueCardProps {
  name: string;
  description?: string;
  coverUrl: string;
  logoUrl?: string;
  badges?: ReactNode;
  championshipBadge?: ReactNode;
  slotLabel: string;
  usedSlots: number;
  maxSlots: number | string;
  fillPercentage: number;
  hasOpenSlots: boolean;
  openSlotsCount: number;
  isTeamLeague?: boolean;
  usedDriverSlots?: number;
  maxDrivers?: number | string;
  timingSummary?: string;
  onClick?: () => void;
}

export function LeagueCard({
  name,
  description,
  coverUrl,
  logoUrl,
  badges,
  championshipBadge,
  slotLabel,
  usedSlots,
  maxSlots,
  fillPercentage,
  hasOpenSlots,
  openSlotsCount,
  isTeamLeague,
  usedDriverSlots,
  maxDrivers,
  timingSummary,
  onClick,
}: LeagueCardProps) {
  return (
    <Box
      position="relative"
      cursor={onClick ? 'pointer' : 'default'}
      h="full"
      onClick={onClick}
      className="group"
    >
      {/* Card Container */}
      <Box 
        position="relative" 
        h="full" 
        rounded="none" 
        bg="panel-gray/40" 
        border 
        borderColor="border-gray/50" 
        overflow="hidden" 
        transition 
        className="hover:border-primary-accent/30 hover:bg-panel-gray/60 transition-all duration-300"
      >
        {/* Cover Image */}
        <Box position="relative" h="32" overflow="hidden">
          <Image
            src={coverUrl}
            alt={`${name} cover`}
            fullWidth
            fullHeight
            objectFit="cover"
            className="transition-transform duration-500 group-hover:scale-105 opacity-60"
          />
          {/* Gradient Overlay */}
          <Box position="absolute" inset="0" bg="linear-gradient(to top, #0C0D0F, transparent)" />
          
          {/* Badges - Top Left */}
          <Box position="absolute" top="3" left="3" display="flex" alignItems="center" gap={2}>
            {badges}
          </Box>

          {/* Championship Type Badge - Top Right */}
          <Box position="absolute" top="3" right="3">
            {championshipBadge}
          </Box>

          {/* Logo */}
          <Box position="absolute" left="4" bottom="-6" zIndex={10}>
            <Box w="12" h="12" rounded="none" overflow="hidden" border borderColor="border-gray/50" bg="graphite-black" shadow="xl">
              {logoUrl ? (
                <Image
                  src={logoUrl}
                  alt={`${name} logo`}
                  width={48}
                  height={48}
                  fullWidth
                  fullHeight
                  objectFit="cover"
                />
              ) : (
                <PlaceholderImage size={48} />
              )}
            </Box>
          </Box>
        </Box>

        {/* Content */}
        <Box pt={8} px={4} pb={4} display="flex" flexDirection="col" fullHeight>
          {/* Title & Description */}
          <Stack direction="row" align="center" gap={2} mb={1}>
            <Box w="1" h="4" bg="primary-accent" />
            <Heading level={3} fontSize="lg" weight="bold" className="line-clamp-1 group-hover:text-primary-accent transition-colors tracking-tight">
              {name}
            </Heading>
          </Stack>
          <Text size="xs" color="text-gray-500" lineClamp={2} mb={4} style={{ height: '2.5rem' }} block leading="relaxed">
            {description || 'No description available'}
          </Text>

          {/* Stats Row */}
          <Box display="flex" alignItems="center" gap={3} mb={4}>
            {/* Primary Slots (Drivers/Teams/Nations) */}
            <Box flexGrow={1}>
              <Box display="flex" alignItems="center" justifyContent="between" mb={1.5}>
                <Text size="xs" color="text-gray-500" weight="bold" className="uppercase tracking-widest">{slotLabel}</Text>
                <Text size="xs" color="text-gray-400" font="mono">
                  {usedSlots}/{maxSlots || '∞'}
                </Text>
              </Box>
              <Box h="1" rounded="none" bg="border-gray/30" overflow="hidden">
                <Box
                  h="full"
                  rounded="none"
                  transition
                  bg={
                    fillPercentage >= 90
                      ? 'warning-amber'
                      : fillPercentage >= 70
                      ? 'primary-accent'
                      : 'success-green'
                  }
                  style={{ width: `${Math.min(fillPercentage, 100)}%` }}
                />
              </Box>
            </Box>

            {/* Open Slots Badge */}
            {hasOpenSlots && (
              <Box display="flex" alignItems="center" gap={1.5} px={2} py={1} rounded="none" bg="primary-accent/5" border borderColor="primary-accent/20">
                <Box w="1.5" h="1.5" rounded="full" bg="primary-accent" className="animate-pulse" />
                <Text size="xs" color="text-primary-accent" weight="bold" className="uppercase tracking-tighter">
                  {openSlotsCount} OPEN
                </Text>
              </Box>
            )}
          </Box>

          {/* Spacer to push footer to bottom */}
          <Box flexGrow={1} />

          {/* Footer Info */}
          <Box display="flex" alignItems="center" justifyContent="between" pt={3} borderTop borderColor="border-gray/30" mt="auto">
            <Box display="flex" alignItems="center" gap={3}>
              {timingSummary && (
                <Box display="flex" alignItems="center" gap={2}>
                  <Icon icon={LucideCalendar} size={3} color="text-gray-500" />
                  <Text size="xs" color="text-gray-500" font="mono">
                    {timingSummary.split('•')[1]?.trim() || timingSummary}
                  </Text>
                </Box>
              )}
            </Box>
            
            {/* View Arrow */}
            <Box display="flex" alignItems="center" gap={1} className="group-hover:text-primary-accent transition-colors">
              <Text size="xs" color="text-gray-500" weight="bold" className="uppercase tracking-widest">VIEW</Text>
              <Icon icon={LucideChevronRight} size={3} color="text-gray-500" className="transition-transform group-hover:translate-x-0.5" />
            </Box>
          </Box>
        </Box>
      </Box>
    </Box>
  );
}