import { useEffect } from "react";
import { BackUp } from "../components/Buttons";

export function Attributions() {
  const teamID = import.meta.env.VITE_TEAM_ID;

  useEffect(() => {
    function listenToIframeHeight(e: MessageEvent) {
      if (e.origin === "https://teams.igem.org") {
        const { type, data } = JSON.parse(e.data);
        if (type === "igem-attribution-form") {
          const element = document.getElementById("igem-attribution-form");
          if (element) {
            element.style.height = `${data + 100}px`;
          }
        }
      }
    }
    window.addEventListener("message", listenToIframeHeight);
    return () => {
      window.removeEventListener("message", listenToIframeHeight);
    };
  }, []);

  return (
    <>
      <div className="row mt-4">
        <div className="col">
         
        </div>
      </div>
      <iframe
        style={{ width: "100%" }}
        id="igem-attribution-form"
        src={`https://teams.igem.org/wiki/${teamID}/attributions`}
      />
      <BackUp/> 
    </>
  );
}