import {useState} from 'react';
import {Trash2} from 'lucide-react';
import {Card, CardContent} from '@/components/ui/card';
import {Button} from '@/components/ui/button';
import type {Artwork} from '@/types';

interface ArtworkCardProps {
  artwork: Artwork;
  isAuthenticated: boolean;
  onDelete: (id: string) => void;
  onClick: () => void;
}

export const ArtworkCard = ({artwork, isAuthenticated, onDelete, onClick}: ArtworkCardProps) => {
  const [isImageLoaded, setIsImageLoaded] = useState(false);

  return (
    <Card className="group relative overflow-hidden cursor-pointer transition-all hover:shadow-xl">
      <div className="aspect-square overflow-hidden bg-muted">
        <img
          src={artwork.imageUrl}
          alt={artwork.title}
          className={`h-full w-full object-cover transition-all duration-300 group-hover:scale-105 ${isImageLoaded ? 'opacity-100' : 'opacity-0'}`}
          loading="lazy"
          onLoad={() => setIsImageLoaded(true)}
          onClick={onClick}
        />
      </div>
      <CardContent className="p-4">
        <div className="flex items-start justify-between">
          <div className="flex-1">
            <h3 className="font-semibold text-lg">{artwork.title}</h3>
            <p className="text-sm text-muted-foreground mt-1">{artwork.medium}</p>
            <p className="text-xs text-muted-foreground mt-1">{artwork.year}</p>
          </div>
          {isAuthenticated && (
            <Button
              variant="ghost"
              size="icon"
              className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
              onClick={e => {
                e.stopPropagation();
                onDelete(artwork.id);
              }}>
              <Trash2 className="h-4 w-4" />
            </Button>
          )}
        </div>
      </CardContent>
    </Card>
  );
};