import Image from "next/image";
import { Button } from "@/components/ui/button";
import { ImageIcon, Plus } from "lucide-react";

interface Photo {
  src: string;
  alt?: string;
}

interface PhotoGalleryProps {
  photos?: Photo[];
  maxPhotos?: number;
  viewMode?: boolean;
  onUpload?: (index: number) => void;
}

export default function PhotoGallery({
  photos = [],
  maxPhotos = 5,
  viewMode = false,
  onUpload = () => {},
}: PhotoGalleryProps) {
  const emptySlots = Math.max(0, maxPhotos - photos.length);

  return (
    <div className="grid md:grid-cols-5 grid-cols-3 gap-y-4 gap-x-2">
      {/* Render existing photos */}
      {photos.map((photo, index) => (
        <div
          key={`photo-${index}`}
          className="relative h-16 w-16 rounded-md overflow-hidden"
        >
          <Image
            src={photo.src}
            alt={photo.alt || "Gallery image"}
            fill
            className="object-cover"
          />
          {!viewMode && (
            <Button
              size="icon"
              onClick={() => onUpload(index)}
              className="absolute bottom-1 right-1 h-5 w-5 rounded-full bg-blue-500 hover:bg-blue-600 text-white p-1"
            >
              <Plus className="h-3 w-3" />
            </Button>
          )}
        </div>
      ))}

      {/* Render empty slots */}
      {!viewMode &&
        Array.from({ length: emptySlots }).map((_, i) => {
          const realIndex = photos.length + i;
          return (
            <div
              key={`empty-${realIndex}`}
              onClick={() => onUpload(realIndex)}
              className="h-16 w-16 border border-[#D9D9D9] rounded-md flex flex-col items-center justify-center text-[#00000099] bg-white cursor-pointer hover:bg-[#D9D9D9]"
            >
              <span className="text-[10px] mb-1">Add Photo</span>
              <ImageIcon className="w-6 h-6" />
            </div>
          );
        })}
    </div>
  );
}
