"use client";
import { jsx } from "react/jsx-runtime";
import { cx } from "@emotion/css";
import { forwardRef, useEffect, useState } from "react";
import { ReactPlayer } from "../../shared/react-player";
import { useStyle } from "../../../runtimes/react/use-style";
import { placeholders } from "../../utils/placeholders";
const ASPECT_RATIO = 16 / 9;
const Video = forwardRef(function Video2({ id, video, width, margin, borderRadius }, ref) {
  const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url);
  const [shouldRenderReactPlayer, setShouldRenderReactPlayer] = useState(false);
  useEffect(() => {
    setShouldRenderReactPlayer(true);
  }, []);
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref,
      id,
      className: cx(
        useStyle({ display: "flex", flexDirection: "column", overflow: "hidden" }),
        width,
        margin,
        borderRadius
      ),
      children: /* @__PURE__ */ jsx("div", { style: { position: "relative", paddingTop: `${100 / ASPECT_RATIO}%` }, children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: shouldRenderReactPlayer && canPlayUrl === true ? /* @__PURE__ */ jsx(
        ReactPlayer,
        {
          ...video,
          width: "100%",
          height: "100%",
          config: {
            vimeo: { playerOptions: { background: video != null && !video.controls } },
            wistia: {
              options: {
                endVideoBehavior: video != null && video.loop === true ? "loop" : "default"
              }
            }
          }
        }
      ) : /* @__PURE__ */ jsx("img", { width: "100%", src: placeholders.video.src, alt: "Video Placeholder" }) }) })
    }
  );
});
var Video_default = Video;
export {
  Video_default as default
};
//# sourceMappingURL=Video.js.map