"use client";
import { useState } from "react";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { GalleryItem as GalleryItemType } from "@/models/GalleryItem";

type GalleryItemProps = {
  item: GalleryItemType;
};

const GalleryItem = ({ item }: GalleryItemProps) => {
  const [detailsOpen, setDetailsOpen] = useState(false);

  return (
    <>
      <div className="bg-white rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105">
        <img 
          src={item.imageUrl} 
          alt={item.altText} 
          className="w-full h-64 object-cover"
        />
        <div className="p-6">
          <h3 className="text-xl font-bold text-neutral-dark font-heading">{item.title}</h3>
          <p className="mt-2 text-gray-600 line-clamp-3">{item.description}</p>
          <div className="mt-4">
            <button 
              onClick={() => setDetailsOpen(true)} 
              className="text-primary hover:text-primary-dark font-medium"
            >
              View Details
            </button>
          </div>
        </div>
      </div>

      {/* Details Dialog */}
      <Dialog open={detailsOpen} onOpenChange={setDetailsOpen}>
        <DialogContent className="sm:max-w-2xl">
          <DialogHeader>
            <DialogTitle className="text-2xl font-heading">{item.title}</DialogTitle>
            <DialogDescription className="text-sm text-muted-foreground">
              Category: {item.category.charAt(0).toUpperCase() + item.category.slice(1)}
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4">
            <img 
              src={item.imageUrl} 
              alt={item.altText} 
              className="w-full h-auto max-h-96 object-contain rounded-md"
            />
            <p className="text-gray-700">{item.description}</p>
            <div className="text-sm text-muted-foreground">
              <p><strong>Alt Text:</strong> {item.altText}</p>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
};

export default GalleryItem;
