"use client";

import { useState } from "react";
import ImageLightbox from "@/components/markdown/ImageLightbox";

/**
 * 静态图片图箱入口（区别于 markdown 管线的 MdImage）：
 * 封面等非 markdown 图片点击进全屏图箱（单图，无多图切换）。
 * 在 Link 内使用时 preventDefault + stopPropagation 阻断外层导航——
 * 点图片本身是看图，点卡片其余区域仍走原链接。
 */
export default function LightboxImage({
  src,
  alt,
  className,
}: {
  src: string;
  alt: string;
  className?: string;
}) {
  const [open, setOpen] = useState(false);
  return (
    <>
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={src}
        alt={alt}
        className={`cursor-zoom-in${className ? ` ${className}` : ""}`}
        loading="lazy"
        decoding="async"
        draggable={false}
        onClick={(e) => {
          e.preventDefault();
          e.stopPropagation();
          setOpen(true);
        }}
      />
      {open && (
        <ImageLightbox
          items={[{ src, alt }]}
          index={0}
          onClose={() => setOpen(false)}
          onIndexChange={() => {}}
        />
      )}
    </>
  );
}