'use client';

import { Collection } from '../../types/api';
import CollectionCard from './CollectionCard';

interface CollectionGridProps {
  collections: Collection[];
  viewMode: 'grid' | 'list';
  onUpdate?: () => void;
}

export default function CollectionGrid({ collections, viewMode, onUpdate }: CollectionGridProps) {
  if (collections.length === 0) {
    return (
      <div className="text-center py-20">
        <div className="theme-text text-lg mb-4">
          No collections found
        </div>
        <p className="theme-text opacity-70">
          Create your first collection to organize your stories
        </p>
      </div>
    );
  }

  return (
    <div className={
      viewMode === 'grid'
        ? 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6'
        : 'space-y-4'
    }>
      {collections.map((collection) => (
        <CollectionCard
          key={collection.id}
          collection={collection}
          viewMode={viewMode}
          onUpdate={onUpdate}
        />
      ))}
    </div>
  );
}