'use client';

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

interface Team {
  id: string;
  name: string;
  description: string;
  logoUrl?: string;
}

interface TeamSummaryPanelProps {
  teams: Team[];
}

/**
 * TeamSummaryPanel - Semantic section for teams.
 */
export function TeamSummaryPanel({ teams }: TeamSummaryPanelProps) {
  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">
          TEAMS ON THE GRID
        </Heading>
        <Link 
          href={routes.public.teams}
          size="xs"
          weight="bold"
          letterSpacing="widest"
          variant="primary"
          hoverColor="text-white"
          transition
        >
          BROWSE TEAMS →
        </Link>
      </Box>

      <Box display="flex" flexDirection="col" 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}
          />
        ))}
      </Box>
    </Box>
  );
}