"use client";

import { useState } from "react";
import ImageLightbox from "@/components/markdown/ImageLightbox";
import { variantURL, widthSrcSet } from "@/lib/responsiveImage";

/**
 * 静态图片图箱入口（区别于 markdown 管线的 MdImage）：
 * 封面等非 markdown 图片点击进全屏图箱（单图，无多图切换）。
 * 在 Link 内使用时 preventDefault + stopPropagation 阻断外层导航——
 * 点图片本身是看图，点卡片其余区域仍走原链接。
 *
 * 可变宽度位可传 variantWidths（白名单档位）+ sizes：页面内显示变体，
 * 图箱始终打开 data-full 指向的原图。
 */
export default function LightboxImage({
  src,
  alt,
  className,
  variantWidths,
  sizes,
}: {
  src: string;
  alt: string;
  className?: string;
  /** 传入白名单档位则输出宽度 srcset；不传则直连原图 */
  variantWidths?: readonly number[];
  /** 配合 srcset 的 sizes 提示 */
  sizes?: string;
}) {
  const [open, setOpen] = useState(false);
  const hasVariants = !!variantWidths && variantWidths.length > 0;
  return (
    <>
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={hasVariants ? variantURL(src, variantWidths[0]) : src}
        srcSet={hasVariants ? widthSrcSet(src, variantWidths) : undefined}
        sizes={hasVariants ? sizes : undefined}
        alt={alt}
        data-full={src}
        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={() => {}}
        />
      )}
    </>
  );
}