'use client';

import React from 'react';
import { Grid } from '@/ui/Grid';
import { TeamCard } from './TeamCard';
import type { TeamSummaryData } from '@/lib/view-data/TeamsViewData';

interface TeamGridProps {
  teams: TeamSummaryData[];
  onTeamClick?: (teamId: string) => void;
}

export function TeamGrid({ teams, onTeamClick }: TeamGridProps) {
  return (
    <Grid cols={1} mdCols={2} lgCols={3} gap={6}>
      {teams.map((team) => (
        <TeamCard 
          key={team.teamId} 
          id={team.teamId}
          name={team.teamName}
          logoUrl={team.logoUrl}
          memberCount={team.memberCount}
          isRecruiting={true} // Redesign feel
          onClick={() => onTeamClick?.(team.teamId)}
        />
      ))}
    </Grid>
  );
}