1"use client";
2
3import { useEffect, useState } from "react";
4import { createPortal } from "react-dom";
5
6function ImageDialog({
7  src,
8  alt,
9  isOpen,
10  onClose,
11}: {
12  src: string;
13  alt: string;
14  isOpen: boolean;
15  onClose: () => void;
16}) {
17  const [mounted, setMounted] = useState(false);
18
19  useEffect(() => {
20    setMounted(true);
21  }, []);
22
23  if (!isOpen || !mounted) return null;
24
25  return createPortal(
26    <div
27      className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
28      onClick={onClose}
29    >
30      <div
31        className="relative max-w-6xl max-h-[90vh]"
32        onClick={(e) => e.stopPropagation()}
33      >
34        <img
35          src={src}
36          alt={alt}
37          className="max-w-full max-h-[90vh] object-contain rounded-lg"
38        />
39      </div>
40    </div>,
41    document.body,
42  );
43}
44
45function ScaledImage({
46  src,
47  alt,
48  height,
49}: {
50  src: string;
51  alt: string;
52  height: number;
53}) {
54  const [isDialogOpen, setIsDialogOpen] = useState(false);
55
56  // CSS-only approach:
57  // - Mobile: overflow-x-auto for horizontal scroll
58  // - Desktop: use left/transform to center image beyond container
59  return (
60    <span className="block relative group mb-4 overflow-x-auto md:overflow-visible">
61      <img
62        src={src}
63        alt={alt || ""}
64        style={{ height: `${height}px` }}
65        className="w-auto max-w-none rounded-lg cursor-pointer group-hover:opacity-95 transition-opacity md:relative md:left-1/2 md:-translate-x-1/2"
66        onClick={() => setIsDialogOpen(true)}
67      />
68      <ImageDialog
69        src={src}
70        alt={alt || ""}
71        isOpen={isDialogOpen}
72        onClose={() => setIsDialogOpen(false)}
73      />
74    </span>
75  );
76}
77
78export function ImageContent({ src, alt, height, ...props }: any) {
79  const [isDialogOpen, setIsDialogOpen] = useState(false);
80
81  // If height is specified, use ScaledImage component
82  const hasCustomHeight = height && parseInt(height, 10) > 0;
83
84  if (hasCustomHeight) {
85    return (
86      <ScaledImage src={src} alt={alt || ""} height={parseInt(height, 10)} />
87    );
88  }
89
90  return (
91    <span className="block relative group mb-4 max-w-full overflow-hidden">
92      <img
93        src={src}
94        alt={alt || ""}
95        className="w-full max-w-full rounded-lg cursor-pointer group-hover:opacity-95 transition-opacity"
96        onClick={() => setIsDialogOpen(true)}
97        {...props}
98      />
99      <span className="absolute bottom-2 right-2 bg-black/60 text-white p-1.5 rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
100        <svg
101          xmlns="http://www.w3.org/2000/svg"
102          width="16"
103          height="16"
104          viewBox="0 0 24 24"
105          fill="none"
106          stroke="currentColor"
107          strokeWidth="2"
108          strokeLinecap="round"
109          strokeLinejoin="round"
110        >
111          <polyline points="15 3 21 3 21 9" />
112          <polyline points="9 21 3 21 3 15" />
113          <line x1="21" y1="3" x2="14" y2="10" />
114          <line x1="3" y1="21" x2="10" y2="14" />
115        </svg>
116      </span>
117      <ImageDialog
118        src={src}
119        alt={alt || ""}
120        isOpen={isDialogOpen}
121        onClose={() => setIsDialogOpen(false)}
122      />
123    </span>
124  );
125}
126