import { Artwork } from '@/lib/directus';
import { ArtworkCard } from './artwork-card';

interface ArtworkGridProps {
  artworks: Artwork[];
  columns?: 2 | 3 | 4;
}

export function ArtworkGrid({ artworks, columns = 3 }: ArtworkGridProps) {
  const gridCols = {
    2: 'grid-cols-1 sm:grid-cols-2',
    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
  };

  if (artworks.length === 0) {
    return (
      <div className="py-12 text-center text-gray-500">
        <p>No artworks to display.</p>
      </div>
    );
  }

  return (
    <div className={`grid gap-6 ${gridCols[columns]}`}>
      {artworks.map((artwork, index) => (
        <ArtworkCard
          key={artwork.id}
          artwork={artwork}
          priority={index < 6}
        />
      ))}
    </div>
  );
}
