"use client";
import { useTranslations } from "next-intl";
import { useEffect } from "react";

const GPRKominfo = () => {
  const t = useTranslations("Landing");

  useEffect(() => {
    if (typeof window !== "undefined") {
      const script = document.createElement("script");
      script.src = "https://widget.kominfo.go.id/gpr-widget-kominfo.min.js";
      script.async = true;
      document.head.appendChild(script);

      return () => {
        document.head.removeChild(script);
      };
    }
  }, []);

  // useEffect(() => {
  //   const handleResize = () => {
  //     const bodyElement = document.getElementById("gpr-kominfo-widget-body");
  //     if (bodyElement) {
  //       bodyElement.style.height = "67vh";
  //     }
  //   };

  //   window.addEventListener("resize", handleResize);

  //   handleResize();

  //   return () => {
  //     window.removeEventListener("resize", handleResize);
  //   };
  // }, []);

  return (
    <div className="flex flex-col justify-between">
      <div
        id="gpr-kominfo-widget-header"
        className="text-center flex justify-center items-center text-lg font-bold text-white rounded-t-xl"
      >
        {t("topik")}
      </div>
      <div id="gpr-kominfo-widget-body"></div>
      {/* <div id="gpr-kominfo-widget-footer"></div> */}
    </div>
  );
};

export default GPRKominfo;