"use client";
import { j as t } from "../../../node_modules/.pnpm/react@19.1.0/node_modules/react/jsx-runtime.mjs";
import { useState as s, useEffect as d } from "react";
import c from "./Gallery.module.scss.mjs";
const r = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|&v(?:i)?=))([^#&?]*).*/, o = (i) => {
  const e = i.match(r);
  return `https://youtube.com/embed/${e == null ? void 0 : e[1]}`;
}, y = (i) => i.type.includes("youtube") || i.type.includes("video") ? "/images/play-video.png/" : i.src;
function g(i) {
  var m;
  const [e, u] = s(null);
  d(() => {
    var l;
    u((l = i == null ? void 0 : i.assets) == null ? void 0 : l[0]);
  }, [i == null ? void 0 : i.assets]);
  let a = null;
  return e != null && e.type.includes("image") ? a = /* @__PURE__ */ t.jsx(
    "img",
    {
      src: e.src,
      className: c.image,
      alt: e.name
    }
  ) : e != null && e.type.includes("video") ? a = /* @__PURE__ */ t.jsx("video", { controls: !0, className: c.video, children: /* @__PURE__ */ t.jsx("source", { src: e.src, type: e.type }) }) : e != null && e.type.includes("youtube") && (a = /* @__PURE__ */ t.jsx(
    "iframe",
    {
      width: "100%",
      src: o(e.src),
      title: "YouTube video player",
      frameBorder: "0",
      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
      allowFullScreen: !0
    }
  )), /* @__PURE__ */ t.jsxs("div", { children: [
    /* @__PURE__ */ t.jsx("div", { className: c.preview, children: a }),
    /* @__PURE__ */ t.jsx("div", { className: c.items, children: (m = i == null ? void 0 : i.assets) == null ? void 0 : m.map((l, n) => /* @__PURE__ */ t.jsx(
      "img",
      {
        onClick: () => u(l),
        src: y(l),
        alt: `${l.name}-preview`,
        className: c.imageThumbnail
      },
      l.name + String(n)
    )) })
  ] });
}
export {
  g as default,
  o as getYouTubeEmbedURL
};
//# sourceMappingURL=index.mjs.map
