import {useState} from 'react';
import {Plus} from 'lucide-react';
import {ArtworkCard} from '@/components/ArtworkCard';
import {ArtworkDetail} from '@/components/ArtworkDetail';
import {Button} from '@/components/ui/button';
import type {Artwork} from '@/types';

interface GalleryProps {
  artworks: Artwork[];
  isAuthenticated: boolean;
  onDelete: (id: string) => void;
  onAddClick: () => void;
}

export const Gallery = ({artworks, isAuthenticated, onDelete, onAddClick}: GalleryProps) => {
  const [selectedArtwork, setSelectedArtwork] = useState<Artwork | null>(null);

  return (
    <section id="gallery" className="py-12 md:py-20">
      <div className="container px-4 md:px-6">
        <div className="flex items-center justify-between mb-8">
          <div>
            <h2 className="text-3xl font-bold tracking-tight">Gallery</h2>
            <p className="text-muted-foreground mt-2">A collection of recent works</p>
          </div>
          {isAuthenticated && (
            <Button onClick={onAddClick}>
              <Plus className="mr-2 h-4 w-4" />
              Add Artwork
            </Button>
          )}
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {artworks.map(artwork => (
            <ArtworkCard key={artwork.id} artwork={artwork} isAuthenticated={isAuthenticated} onDelete={onDelete} onClick={() => setSelectedArtwork(artwork)} />
          ))}
        </div>

        {artworks.length === 0 && (
          <div className="text-center py-12">
            <p className="text-muted-foreground">No artworks yet. {isAuthenticated ? 'Add your first piece!' : ''}</p>
          </div>
        )}
      </div>

      <ArtworkDetail artwork={selectedArtwork} open={!!selectedArtwork} onOpenChange={open => !open && setSelectedArtwork(null)} />
    </section>
  );
};
