'use client';

import { RecruitingTeamCard } from '@/components/teams/RecruitingTeamCard';
import { RecruitingTeamGrid } from '@/components/teams/RecruitingTeamGrid';
import { getMediaUrl } from '@/lib/utilities/media';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { UserPlus } from 'lucide-react';

interface FeaturedRecruitingProps {
  teams: Array<{
    id: string;
    name: string;
    description?: string;
    logoUrl?: string;
    category?: string;
    memberCount: number;
    totalWins: number;
    performanceLevel: string;
    isRecruiting: boolean;
  }>;
  onTeamClick: (id: string) => void;
}

export function FeaturedRecruiting({ teams, onTeamClick }: FeaturedRecruitingProps) {
  const recruitingTeams = teams.filter((t) => t.isRecruiting).slice(0, 4);

  if (recruitingTeams.length === 0) return null;

  return (
    <Stack mb={10}>
      <Stack direction="row" align="center" gap={3} mb={4}>
        <Stack 
          display="flex" 
          center 
          width="10" 
          height="10" 
          rounded="xl" 
          bg="bg-performance-green/10" 
          border={true} 
          borderColor="border-performance-green/20"
        >
          <Icon icon={UserPlus} size={5} color="text-performance-green" />
        </Stack>
        <Stack>
          <Heading level={2}>Looking for Drivers</Heading>
          <Text size="xs" color="text-gray-500">Teams actively recruiting new members</Text>
        </Stack>
      </Stack>

      <RecruitingTeamGrid>
        {recruitingTeams.map((team) => (
          <RecruitingTeamCard
            key={team.id}
            name={team.name}
            description={team.description}
            logoUrl={team.logoUrl || getMediaUrl('team-logo', team.id)}
            category={team.category}
            memberCount={team.memberCount}
            totalWins={team.totalWins}
            onClick={() => onTeamClick(team.id)}
          />
        ))}
      </RecruitingTeamGrid>
    </Stack>
  );
}