"use client";
import { jsxs as c, jsx as s } from "react/jsx-runtime";
import { useState as g, useRef as h, useEffect as u } from "react";
import { cn as y } from "../../../../utils/cn/cn.es.js";
import r from "../../../../modules/Testimonial/components/VideoCard/videoCard.module.css";
import { PlayButton as b } from "../../../../components/PlayButton/PlayButton.es.js";
import { Typography as v } from "../../../../components/Typography/Typography.es.js";
import { Product as C } from "../Product/Product.es.js";
const j = ({ product: t, review: i, background: f, isActive: d }) => {
  var p;
  const [e, n] = g(!1), a = h(null), m = h(null);
  return u(() => {
    const l = new IntersectionObserver(
      ([o]) => {
        !o.isIntersecting && e && n(!1);
      },
      { threshold: 0.2 }
    );
    return m.current && l.observe(m.current), () => l.disconnect();
  }, [e]), u(() => {
    d || n(!1);
  }, [d]), u(() => {
    !e && a.current && (a.current.pause(), a.current.currentTime = 0);
  }, [e]), /* @__PURE__ */ c(
    "div",
    {
      className: r.root,
      ref: m,
      onClick: () => e ? n(!1) : void 0,
      style: { backgroundImage: `url(${f.preview})` },
      children: [
        /* @__PURE__ */ c("div", { className: r.mediaContainer, children: [
          /* @__PURE__ */ s(
            "video",
            {
              ref: a,
              src: f.url,
              playsInline: !0,
              controls: !1,
              muted: !1,
              onEnded: () => n(!1),
              className: y(r.media, !e && r.mediaHidden)
            }
          ),
          !e && /* @__PURE__ */ s("div", { className: r.playButton, children: /* @__PURE__ */ s(
            b,
            {
              onClick: (l) => {
                var o;
                l.stopPropagation(), (o = a.current) == null || o.play(), n(!0);
              }
            }
          ) })
        ] }),
        /* @__PURE__ */ c("div", { className: r.infoContainer, children: [
          ((p = i == null ? void 0 : i.author) == null ? void 0 : p.username) && /* @__PURE__ */ s(v, { as: "p", defaultVariant: "labelSm", mobileVariant: "labelXs", emphasis: !0, weight: "regular", children: i.author.username }),
          t && /* @__PURE__ */ s(C, { image: t.image, name: t.name, link: t.link })
        ] })
      ]
    }
  );
};
export {
  j as VideoCard
};
