import React, { useState } from "react";
import "./iframe-styles.scss";
import clsx from "clsx";

interface IframeProps {
  iframeURL: string;
}

const Iframe: React.FC<IframeProps> = ({ iframeURL }) => {
  const [isLoading, setIsLoading] = useState(true);

  const handleIframeLoad = () => {
    setIsLoading(false);
  };

  return (
    <div
      className={clsx("dashboard-iframe", !isLoading && "with-border-radius")}
    >
      {isLoading && <div className="iframe-loader"></div>}
      <iframe
        src={iframeURL}
        onLoad={handleIframeLoad}
        title="External Website"
        width="100%"
        style={{
          borderRadius: "4px",
          minHeight: "calc(100vh - 5.6rem)",
          backgroundColor: "#fff",
          height: "100%",
        }}
        sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-top-navigation"
        allow="clipboard-write"
      />
    </div>
  );
};

export default Iframe;