'use client';

import React from 'react';
import { LeagueCard } from '@/components/leagues/LeagueCard';
import { routes } from '@/lib/routing/RouteConfig';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Link } from '@/ui/Link';

interface League {
  id: string;
  name: string;
  description: string;
}

interface LeagueSummaryPanelProps {
  leagues: League[];
}

/**
 * LeagueSummaryPanel - Semantic section for featured leagues.
 */
export function LeagueSummaryPanel({ leagues }: LeagueSummaryPanelProps) {
  return (
    <Box as="section" bg="surface-charcoal" p={6} border borderColor="border-gray" rounded="none">
      <Box display="flex" alignItems="center" justifyContent="between" mb={6}>
        <Heading level={3} fontSize="xs" weight="bold" letterSpacing="widest" color="text-white">
          FEATURED LEAGUES
        </Heading>
        <Link 
          href={routes.public.leagues}
          size="xs"
          weight="bold"
          letterSpacing="widest"
          variant="primary"
          hoverColor="text-white"
          transition
        >
          VIEW ALL →
        </Link>
      </Box>

      <Box display="flex" flexDirection="col" gap={4}>
        {leagues.slice(0, 2).map((league) => (
          <LeagueCard
            key={league.id}
            name={league.name}
            description={league.description}
            coverUrl="/images/ff1600.jpeg"
            slotLabel="Drivers"
            usedSlots={18}
            maxSlots={24}
            fillPercentage={75}
            hasOpenSlots={true}
            openSlotsCount={6}
          />
        ))}
      </Box>
    </Box>
  );
}