"use client";
import React from 'react';

interface ImageLightboxProps {
    isOpen: boolean;
    onClose: () => void;
    imageUrl: string;
}

const ImageLightbox: React.FC<ImageLightboxProps> = ({ isOpen, onClose, imageUrl }) => {
    if (!isOpen) return null;

    return (
        <div className="modal fade show d-block" tabIndex={-1} role="dialog" style={{ backgroundColor: 'rgba(0,0,0,0.95)', zIndex: 1060, cursor: 'pointer' }} onClick={onClose}>
            <div className="modal-dialog modal-lg modal-dialog-centered" role="document" style={{ maxWidth: '95%' }}>
                <div className="modal-content" style={{ backgroundColor: 'transparent', border: 'none' }}>
                    <div className="modal-body p-0 text-center">
                        <img
                            src={imageUrl}
                            alt="Preview"
                            style={{
                                maxWidth: '100%',
                                maxHeight: '95vh',
                                objectFit: 'contain',
                                borderRadius: '4px',
                                boxShadow: '0 0 100px rgba(0,0,0,0.5)'
                            }}
                        />
                    </div>
                </div>
            </div>
        </div>
    );

};

export default ImageLightbox;
