interface ImagePreviewDialogProps {
    imageUrl: string | null;
    onClose: () => void;
}
import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
import { X } from 'lucide-react';
import { Dialog, DialogContent, DialogTitle, DialogDescription } from "@/components/ui/dialog"

export function ImagePreviewDialog({ imageUrl, onClose }: ImagePreviewDialogProps) {
    return (
        <Dialog open={!!imageUrl} onOpenChange={() => onClose()}>
            <DialogContent
                className="max-w-3xl p-0 overflow-hidden border-none bg-transparent shadow-none"
                showCloseButton={false}
            >
                <VisuallyHidden>
                    <DialogTitle>Image preview</DialogTitle>
                    <DialogDescription>Preview of selected image</DialogDescription>
                </VisuallyHidden>

                <div className="relative group">
                    <img
                        src={imageUrl ?? undefined}
                        alt="Preview"
                        className="w-full h-auto max-h-[80vh] object-contain rounded-lg"
                    />
                    <button
                        onClick={onClose}
                        className="absolute top-4 right-4 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 backdrop-blur-sm transition-all shadow-xl"
                    >
                        <X className="size-5" />
                    </button>
                </div>
            </DialogContent>
        </Dialog>
    );
}