import { Skeleton } from '@/components/ui/skeleton';
import { ImageIcon } from 'lucide-react';
import { MediaItem } from '../types';
import { MediaCard } from './MediaCard';

interface MediaGridProps {
    items: MediaItem[];
    selectedItems: MediaItem[];
    onSelect: (item: MediaItem) => void;
    activeItem?: MediaItem | null;
    isLoading?: boolean;
}

export function MediaGrid({ items, selectedItems, onSelect, activeItem, isLoading = false }: MediaGridProps) {
    if (isLoading) {
        return (
            <div className="grid grid-cols-4 gap-1 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-8">
                {Array.from({ length: 24 }).map((_, i) => (
                    <Skeleton key={i} className="aspect-square w-full" />
                ))}
            </div>
        );
    }

    if (items.length === 0) {
        return (
            <div className="flex flex-col items-center justify-center py-16 text-center">
                <div className="mb-4 rounded-full bg-[#dcdcde] p-4 dark:bg-zinc-700">
                    <ImageIcon className="h-8 w-8 text-[#50575e] dark:text-zinc-500" />
                </div>
                <p className="text-sm text-[#50575e] dark:text-zinc-400">No media items found</p>
            </div>
        );
    }

    return (
        <div className="grid grid-cols-4 gap-1 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-8">
            {items.map((item) => (
                <MediaCard
                    key={item.id}
                    item={item}
                    selected={selectedItems.some((i) => i.id === item.id)}
                    isActive={activeItem?.id === item.id}
                    onClick={() => onSelect(item)}
                />
            ))}
        </div>
    );
}