'use client';
import type { Photo } from '@/lib/data';
import PhotoCard from './photo-card';

const getCardClass = (index: number, total: number) => {
    // Definir patrones de diseño basados en el índice.
    // Ejemplo: cada 7 fotos, una es grande.
    if ((index + 1) % 7 === 1 && total > 2) {
      return 'col-span-2 row-span-2'; // Ocupa 2x2 (grande)
    }
     if ((index + 1) % 5 === 0 && total > 4) {
      return 'col-span-2 row-span-1'; // Ocupa 2x1 (horizontal)
    }
  
    return 'col-span-1 row-span-1'; // Cuadrada pequeña
};

interface GalleryGridProps {
  photos: Photo[];
  onPhotoSelect: (photo: Photo) => void;
}

export default function GalleryGrid({ photos, onPhotoSelect }: GalleryGridProps) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-3 auto-rows-[200px] gap-4 [grid-auto-flow:dense]">
      {photos.map((photo, index) => (
        <PhotoCard
          key={photo.id}
          photo={photo}
          onPhotoSelect={onPhotoSelect}
          className={getCardClass(index, photos.length)}
        />
      ))}
    </div>
  );
}