frontend/components/gallery/GalleryGrid.tsx

"use client";

import React from "react";
import { AdCard } from "./AdCard";
import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
import type { AdCreativeDB } from "@/types/api";

interface GalleryGridProps {
  ads: AdCreativeDB[];
  selectedAds: string[];
  onAdSelect: (adId: string) => void;
  isLoading?: boolean;
}

export const GalleryGrid: React.FC<GalleryGridProps> = ({
  ads,
  selectedAds,
  onAdSelect,
  isLoading = false,
}) => {
  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-12">
        <LoadingSpinner size="lg" />
      </div>
    );
  }

  if (ads.length === 0) {
    return (
      <div className="text-center py-12">
        <p className="text-gray-500 mb-4">No ads found</p>
        <p className="text-sm text-gray-400">Try adjusting your filters or generate a new ad</p>
      </div>
    );
  }

  const hasAnySelection = selectedAds.length > 0;

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
      {ads.map((ad) => (
        <AdCard
          key={ad.id}
          ad={ad}
          isSelected={selectedAds.includes(ad.id)}
          onSelect={onAdSelect}
          hasAnySelection={hasAnySelection}
        />
      ))}
    </div>
  );
};