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

import { ChevronRight, Users, Clock } from 'lucide-react';
import { ReactNode } from 'react';
import { Box } from './Box';
import { Card } from './Card';
import { Icon } from './Icon';
import { Image } from './Image';
import { Text } from './Text';
import { Stack } from './Stack';
import { Group } from './Group';
import { Heading } from './Heading';

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

export const LeagueCard = ({ 
  name, 
  description, 
  coverUrl, 
  logoUrl, 
  slotLabel,
  usedSlots,
  maxSlots,
  fillPercentage,
  hasOpenSlots,
  openSlotsCount,
  isTeamLeague,
  usedDriverSlots,
  maxDrivers,
  timingSummary,
  onClick, 
  badges,
  championshipBadge 
}: LeagueCardProps) => {
  return (
    <Card 
      variant="precision" 
      onClick={onClick} 
      fullHeight
      padding="none"
    >
      <Box height="8rem" position="relative" overflow="hidden">
        <Image 
          src={coverUrl} 
          alt={name} 
          fullWidth 
          fullHeight 
          objectFit="cover" 
          style={{ opacity: 0.4, filter: 'grayscale(0.2)' }} 
        />
        <Box 
          position="absolute" 
          inset={0} 
          style={{ background: 'linear-gradient(to top, var(--ui-color-bg-base), transparent)' }} 
        />
        <Box position="absolute" top={3} left={3}>
          <Group gap={2}>
            {badges}
          </Group>
        </Box>
      </Box>

      <Stack padding={5} gap={5} flex={1}>
        <Stack direction="row" align="start" gap={4} marginTop="-2.5rem" position="relative" zIndex={10}>
          <Box 
            width="4rem" 
            height="4rem" 
            bg="var(--ui-color-bg-surface)" 
            rounded="lg" 
            border 
            borderColor="var(--ui-color-border-default)"
            overflow="hidden"
            display="flex"
            alignItems="center"
            justifyContent="center"
          >
            {logoUrl ? (
              <Image src={logoUrl} alt={name} fullWidth fullHeight objectFit="cover" />
            ) : (
              <Icon icon={Users} size={6} intent="low" />
            )}
          </Box>
          <Stack flex={1} gap={1} paddingTop="2.5rem">
            <Heading level={4} weight="bold" uppercase letterSpacing="tight">
              {name}
            </Heading>
            {championshipBadge}
          </Stack>
        </Stack>

        {description && (
          <Text size="xs" variant="low" lineClamp={2} block leading="relaxed">
            {description}
          </Text>
        )}

        <Box flex={1} />

        <Stack gap={4}>
          <Stack gap={2}>
            <Group justify="between" align="end">
              <Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest">{slotLabel}</Text>
              <Text size="sm" variant="high" font="mono" weight="bold">{usedSlots} / {maxSlots}</Text>
            </Group>
            <Box height="2px" bg="var(--ui-color-bg-surface-muted)" rounded="full" overflow="hidden">
              <Box 
                height="100%" 
                bg="var(--ui-color-intent-primary)" 
                style={{ 
                  width: `${Math.min(fillPercentage, 100)}%`,
                  boxShadow: `0 0 8px var(--ui-color-intent-primary)44`
                }} 
              />
            </Box>
          </Stack>

          <Stack direction="row" justify="between" align="center" paddingTop={3} style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}>
            <Stack direction="row" align="center" gap={1.5}>
              <Icon icon={Clock} size={3} intent="low" />
              <Text size="xs" variant="low" mono uppercase truncate maxWidth="12rem">
                {timingSummary || 'Schedule TBD'}
              </Text>
            </Stack>
            <Icon icon={ChevronRight} size={3} intent="primary" />
          </Stack>
        </Stack>
      </Stack>
    </Card>
  );
};

export interface LeagueCardStatsProps {
  label: string;
  value: string;
  percentage: number;
  intent?: 'primary' | 'success' | 'warning' | 'telemetry';
}

export const LeagueCardStats = ({ label, value, percentage, intent = 'primary' }: LeagueCardStatsProps) => {
  const intentColors = {
    primary: 'var(--ui-color-intent-primary)',
    success: 'var(--ui-color-intent-success)',
    warning: 'var(--ui-color-intent-warning)',
    telemetry: 'var(--ui-color-intent-telemetry)',
  };

  return (
    <Box marginBottom={6}>
      <Stack gap={2}>
        <Group justify="between" align="end">
          <Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest">{label}</Text>
          <Text size="sm" variant="high" font="mono" weight="bold">{value}</Text>
        </Group>
        <Box height="2px" bg="var(--ui-color-bg-surface-muted)" rounded="full" overflow="hidden">
          <Box 
            height="100%" 
            bg={intentColors[intent]} 
            style={{ 
              width: `${Math.min(percentage, 100)}%`,
              boxShadow: `0 0 8px ${intentColors[intent]}44`
            }} 
          />
        </Box>
      </Stack>
    </Box>
  );
};

export interface LeagueCardFooterProps {
  children: ReactNode;
}

export const LeagueCardFooter = ({ children }: LeagueCardFooterProps) => (
  <Box 
    marginTop="auto" 
    paddingTop={4} 
    style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}
  >
    <Group justify="between" align="center">
      <Box flex={1}>
        {children}
      </Box>
      <Group gap={1} align="center">
        <Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest">ACCESS</Text>
        <Icon icon={ChevronRight} size={3} intent="low" />
      </Group>
    </Group>
  </Box>
);