'use client';

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

import { CardStack } from '@/ui/CardStack';

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

interface LeagueSummaryPanelProps {
  leagues: League[];
}

/**
 * LeagueSummaryPanel - Semantic section for featured leagues.
 */
export function LeagueSummaryPanel({ leagues }: LeagueSummaryPanelProps) {
  const actions = (
    <Link 
      href={routes.public.leagues}
      size="xs"
      weight="bold"
      letterSpacing="widest"
      variant="primary"
    >
      VIEW ALL →
    </Link>
  );

  return (
    <Panel 
      variant="dark" 
      padding={6} 
      title="FEATURED LEAGUES"
      actions={actions}
    >
      <CardStack gap={4}>
        {leagues.slice(0, 2).map((league) => (
          <LeagueCard
            key={league.id}
            league={league as any}
          />
        ))}
      </CardStack>
    </Panel>
  );
}