'use client';

import { TeamCard } from '@/components/teams/TeamCard';
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 Team {
  id: string;
  name: string;
  description: string;
  logoUrl?: string;
}

interface TeamSummaryPanelProps {
  teams: Team[];
}

/**
 * TeamSummaryPanel - Semantic section for teams.
 */
export function TeamSummaryPanel({ teams }: TeamSummaryPanelProps) {
  const actions = (
    <Link 
      href={routes.public.teams}
      size="xs"
      weight="bold"
      letterSpacing="widest"
      variant="primary"
    >
      BROWSE TEAMS →
    </Link>
  );

  return (
    <Panel 
      variant="dark" 
      padding={6} 
      title="TEAMS ON THE GRID"
      actions={actions}
    >
      <CardStack gap={4}>
        {teams.slice(0, 2).map((team) => (
          <TeamCard
            key={team.id}
            name={team.name}
            description={team.description}
            logo={team.logoUrl}
            memberCount={12}
            isRecruiting={true}
          />
        ))}
      </CardStack>
    </Panel>
  );
}