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

type Props = {
  url: string;
};

export const InstaUrl = ({ url }: Props) => {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const scriptExists = document.querySelector('script[src="//www.instagram.com/embed.js"]');

    const loadInstagram = () => {
      if ((window as any)?.instgrm) {
         (window as any).instgrm.Embeds.process();
      }
    };

    if (!scriptExists) {
      const script = document.createElement("script");
      script.src = "//www.instagram.com/embed.js";
      script.async = true;
      document.body.appendChild(script);
      script.onload = loadInstagram;
    } else {
      loadInstagram();
    }
  }, [url]);

  return (
    <div className="instagram-embed" ref={ref}>
      <blockquote
        className="instagram-media"
        data-instgrm-permalink={url.replace(
          /https:\/\/www\.instagram\.com\/[^/]+/,
          "https://www.instagram.com"
        )}
        data-instgrm-version="14"
        style={{ width: "100%", maxWidth: "540px", margin: "auto" }}
      ></blockquote>
    </div>
  );
};

export default InstaUrl;