import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Star } from 'lucide-react';
import { type Team } from '@/types';
import { FavoriteAnimalCard, FavoriteEmptyState } from '@/components/team/favorites';

interface Props {
    team?: Team | null;
    teamAnimals: any[];
    canManageMembers: boolean;
    setManageAnimalsOpen: (open: boolean) => void;
}

export default function TeamFavoritesTab({
    team,
    teamAnimals,
    canManageMembers,
    setManageAnimalsOpen,
}: Props) {
    const favorites = teamAnimals?.filter(animal => animal.is_favorite) || [];
    return (
        <Card className="rounded-xl">
            <CardHeader className="flex flex-row items-start justify-between rounded-xl">
                <div>
                    <CardTitle>Perros destacados del equipo</CardTitle>
                    <CardDescription>
                        {favorites.length > 0
                            ? `${favorites.length} perros destacados representan oficialmente tu equipo`
                            : 'Perros marcados como destacados que representan oficialmente al equipo en eventos y exposiciones.'}
                    </CardDescription>
                </div>
                <div className="flex items-center gap-2">
                    <Button
                        variant="default"
                        className="rounded-xl"
                        onClick={() => setManageAnimalsOpen(true)}
                        disabled={!canManageMembers}
                    >
                        <Star className="w-4 h-4 mr-2" />
                        Gestionar destacados
                    </Button>
                </div>
            </CardHeader>
            <CardContent>
                {favorites.length > 0 ? (
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                        {favorites.map((animal) => (
                            <FavoriteAnimalCard key={animal.id} animal={animal} />
                        ))}
                    </div>
                ) : (
                    <FavoriteEmptyState
                        canManageAnimals={canManageMembers}
                        hasAnimals={teamAnimals?.length > 0}
                        onManageClick={() => setManageAnimalsOpen(true)}
                    />
                )}
            </CardContent>
        </Card>
    );
}