gridpilot.gg/apps/website/components/leagues/AvailableLeagueCard.tsx

import { Badge } from '@/ui/Badge';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { Text } from '@/ui/Text';
import { CheckCircle2, Clock, Star } from 'lucide-react';

interface AvailableLeague {
  id: string;
  name: string;
  game: string;
  drivers: number;
  avgViewsPerRace: number;
  mainSponsorSlot: { available: boolean; price: number };
  secondarySlots: { available: number; total: number; price: number };
  rating: number;
  tier: 'premium' | 'standard' | 'starter';
  nextRace?: string;
  seasonStatus: 'active' | 'upcoming' | 'completed';
  description: string;
  formattedAvgViews: string;
  formattedCpm: string;
}

interface AvailableLeagueCardProps {
  league: AvailableLeague;
}

export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
  const tierConfig = {
    premium: { icon: '⭐', label: 'Premium' },
    standard: { icon: '🏆', label: 'Standard' },
    starter: { icon: '🚀', label: 'Starter' },
  };

  const statusConfig = {
    active: { intent: 'success' as const, label: 'Active Season' },
    upcoming: { intent: 'warning' as const, label: 'Starting Soon' },
    completed: { intent: 'default' as const, label: 'Season Ended' },
  };

  const config = tierConfig[league.tier];
  const status = statusConfig[league.seasonStatus];

  return (
    <Card>
      <Stack gap={4}>
        {/* Header */}
        <Stack align="start" justify="between">
          <Stack>
            <Stack gap={2}>
              <Badge variant="primary">{config.icon} {config.label}</Badge>
              <Badge variant={status.intent}>{status.label}</Badge>
            </Stack>
            <Heading level={3}>{league.name}</Heading>
            <Text size="sm" variant="low">{league.game}</Text>
          </Stack>
          <Badge variant="default">
            <Stack align="center" gap={1}>
              <Icon icon={Star} size={3.5} intent="warning" />
              <Text size="sm" weight="medium" variant="high">{league.rating}</Text>
            </Stack>
          </Badge>
        </Stack>

        {/* Description */}
        <Text size="sm" variant="low">{league.description}</Text>

        {/* Stats Grid */}
        <Grid cols={3} gap={2}>
          <StatItem label="Drivers" value={league.drivers} />
          <StatItem label="Avg Views" value={league.formattedAvgViews} />
          <StatItem label="CPM" value={league.formattedCpm} intent="success" />
        </Grid>

        {/* Next Race */}
        {league.nextRace && (
          <Stack align="center" gap={2}>
            <Icon icon={Clock} size={4} intent="low" />
            <Text size="sm" variant="low">Next: {league.nextRace}</Text>
          </Stack>
        )}

        {/* Sponsorship Slots */}
        <Stack gap={2}>
          <SlotRow 
            label="Main Sponsor" 
            available={league.mainSponsorSlot.available} 
            price={`$${league.mainSponsorSlot.price}/season`} 
          />
          <SlotRow 
            label="Secondary Slots" 
            available={league.secondarySlots.available > 0} 
            price={`${league.secondarySlots.available}/${league.secondarySlots.total} @ $${league.secondarySlots.price}`} 
          />
        </Stack>

        {/* Actions */}
        <Stack gap={2}>
          <Link href={`/sponsor/leagues/${league.id}`}>
            <Button variant="secondary" fullWidth size="sm">
              View Details
            </Button>
          </Link>
          {(league.mainSponsorSlot.available || league.secondarySlots.available > 0) && (
            <Link href={`/sponsor/leagues/${league.id}?action=sponsor`}>
              <Button variant="primary" fullWidth size="sm">
                Sponsor
              </Button>
            </Link>
          )}
        </Stack>
      </Stack>
    </Card>
  );
}

function StatItem({ label, value, intent = 'high' }: { label: string, value: string | number, intent?: 'high' | 'success' }) {
  return (
    <Card variant="dark">
      <Stack align="center">
        <Text weight="bold" variant={intent}>{value}</Text>
        <Text size="xs" variant="low" uppercase>{label}</Text>
      </Stack>
    </Card>
  );
}

function SlotRow({ label, available, price }: { label: string, available: boolean, price: string }) {
  return (
    <Card variant="dark">
      <Stack align="center" justify="between">
        <Stack align="center" gap={2}>
          <Icon icon={CheckCircle2} size={3} intent={available ? 'success' : 'critical'} />
          <Text size="sm" variant="low">{label}</Text>
        </Stack>
        <Stack>
          {available ? (
            <Text size="sm" weight="semibold" variant="high">{price}</Text>
          ) : (
            <Stack align="center" gap={1}>
              <Icon icon={CheckCircle2} size={3} intent="low" />
              <Text size="sm" variant="low">Filled</Text>
            </Stack>
          )}
        </Stack>
      </Stack>
    </Card>
  );
}