sapiens-mobile/client/src/components/ImagePreviewDialog.tsx

import { X } from "lucide-react";
import { 
  Dialog, 
  DialogContent, 
  DialogTrigger,
  DialogTitle,
  DialogHeader,
  DialogDescription
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";

interface ImagePreviewDialogProps {
  children: React.ReactNode;
  imageSrc?: string;
  imageAlt: string;
  title?: string;
}

export default function ImagePreviewDialog({
  children,
  imageSrc,
  imageAlt,
  title
}: ImagePreviewDialogProps) {
  if (!imageSrc) return <>{children}</>;

  return (
    <Dialog>
      <DialogTrigger asChild>
        {children}
      </DialogTrigger>
      <DialogContent className="bg-background rounded-lg shadow-lg max-w-md w-full m-4 max-h-[80vh] overflow-y-auto">
        <DialogHeader className="sr-only">
          <DialogTitle>
            <VisuallyHidden>{title || imageAlt}</VisuallyHidden>
          </DialogTitle>
          <DialogDescription>
            <VisuallyHidden>Profile image preview</VisuallyHidden>
          </DialogDescription>
        </DialogHeader>
        
        <div className="p-6">
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center gap-3">
              <div className="h-12 w-12 bg-primary/10 rounded-full flex items-center justify-center">
                <span className="text-sm font-medium">{title?.slice(0, 2).toUpperCase()}</span>
              </div>
              <div>
                <h2 className="text-lg font-bold" data-testid="text-modal-name">
                  {title}
                </h2>
              </div>
            </div>
          </div>
          
          {/* Image container */}
          <div className="flex justify-center">
            <img
              src={imageSrc}
              alt={imageAlt}
              className="max-w-full max-h-[60vh] object-contain rounded-lg shadow-lg"
            />
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}