import { Dialog, DialogContent } from "@/components/ui/dialog";
import { ChevronLeft, ChevronRight, X } from "lucide-react";
import { Button } from "@/components/ui/button";

interface ModalProps {
    image: {
        src: string;
        alt: string;
    };
    isOpen: boolean;
    onClose: () => void;
    onNext?: () => void;
    onPrevious?: () => void;
}

export function ImageModal({ image, isOpen, onClose, onNext, onPrevious }: ModalProps) {
    if (!image) return null;

    return (
        <Dialog open={isOpen} onOpenChange={() => onClose()}>
            <DialogContent className="max-w-[90vw] max-h-[90vh] p-0 bg-foreground/90">
                <Button size={"icon"} variant={"ghost"} className="absolute right-4 top-4 z-50" onClick={onClose}>
                    <X className="h-10 w-10 text-background" />
                </Button>
                <div className="relative flex items-center justify-center w-full h-full">
                    <img
                        src={image.src}
                        alt={image.alt}
                        className="max-h-[85vh] max-w-[85vw] object-contain"
                    />
                    {onPrevious && (
                        <Button
                            size={"icon"} variant={"ghost"}
                            onClick={onPrevious}
                            className="absolute left-4"
                        >
                            <ChevronLeft className="h-8 w-8 text-background" />
                        </Button>
                    )}
                    {onNext && (
                        <Button
                            size={"icon"} variant={"ghost"}
                            onClick={onNext}
                            className="absolute right-4"
                        >
                            <ChevronRight className="h-8 w-8 text-background" />
                        </Button>
                    )}
                </div>
            </DialogContent>
        </Dialog>
    );
};