"use client";
import { useRef, useEffect } from "react";

import { Fancybox as NativeFancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css";

function YouTubeFancyBox(props: any) {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;

    const delegate = props.delegate || "[data-fancybox]";
    const options =
      (props.options || {}).type === "youtube"
        ? {
            // Set YouTube-specific options here
            type: "iframe",
            iframe: {
              scrolling: "auto",
              // You can add other YouTube options if needed
            },
          }
        : props.options; // Use user-provided options for non-YouTube

    NativeFancybox.bind(container, delegate, options);

    return () => {
      NativeFancybox.unbind(container);
      NativeFancybox.close();
    };
  }, [props.options]); // Re-run useEffect on option changes

  return <div ref={containerRef}>{props.children}</div>;
}

export default YouTubeFancyBox;