'use client'; import { useState, useCallback } from 'react'; import { ArrowLeft, ArrowRight } from "@/components/ui/icon"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogTitle, } from '@/components/ui/dialog'; interface LightboxImage { src: string; alt: string; } interface ImageLightboxProps { images: LightboxImage[]; initialIndex: number; open: boolean; onOpenChange: (open: boolean) => void; } export function ImageLightbox({ images, initialIndex, open, onOpenChange }: ImageLightboxProps) { const [currentIndex, setCurrentIndex] = useState(initialIndex); const goToPrev = useCallback(() => { setCurrentIndex((prev) => (prev > 0 ? prev - 1 : images.length - 1)); }, [images.length]); const goToNext = useCallback(() => { setCurrentIndex((prev) => (prev < images.length - 1 ? prev + 1 : 0)); }, [images.length]); // Reset index when dialog opens with a new initialIndex const handleOpenChange = useCallback((newOpen: boolean) => { if (newOpen) { setCurrentIndex(initialIndex); } onOpenChange(newOpen); }, [initialIndex, onOpenChange]); if (images.length === 0) return null; const current = images[currentIndex]; return ( ); }