import {
  Spinner
} from "./chunk-FR2GDOU2.js";
import {
  Flex
} from "./chunk-25HMMI7R.js";

// src/molecules/curriculumV2/CurriculumContents/curriculum-video.tsx
import { useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
function CurriculumVideo(props) {
  const { item } = props;
  const { url } = item;
  const [isLoading, setIsLoading] = useState(true);
  return /* @__PURE__ */ jsxs(
    Flex,
    {
      align: "center",
      justify: "center",
      style: {
        width: "100%",
        height: "100%",
        backgroundColor: "black",
        position: "relative"
      },
      children: [
        isLoading ? /* @__PURE__ */ jsx(
          Flex,
          {
            align: "center",
            height: "100%",
            justify: "center",
            position: "absolute",
            style: {
              position: "absolute",
              top: 0,
              left: 0,
              zIndex: 1,
              color: "white"
            },
            width: "100%",
            children: /* @__PURE__ */ jsx(Spinner, { size: "3", style: { width: 48, height: 48 } })
          }
        ) : null,
        /* @__PURE__ */ jsx(
          "iframe",
          {
            allowFullScreen: true,
            onLoad: () => {
              setIsLoading(false);
            },
            src: `${url}?theme=light`,
            style: { width: "100%", height: "100%", border: "none" },
            title: "Curriculum Video",
            onError: () => {
              setIsLoading(false);
            }
          }
        )
      ]
    }
  );
}
var curriculum_video_default = CurriculumVideo;

export {
  curriculum_video_default
};
//# sourceMappingURL=chunk-QGKQ3IX7.js.map