"use client";

import { useState } from "react";

type LabIFrameEmbedProps = {
  eyebrow: string;
  heading: string;
  lede: string;
  src: string;
  title: string;
};

export function LabIFrameEmbed({
  eyebrow,
  heading,
  lede,
  src,
  title,
}: LabIFrameEmbedProps) {
  const [hasLoaded, setHasLoaded] = useState(false);
  const [hasErrored, setHasErrored] = useState(false);

  return (
    <section className="lab-iframe-embed" data-widget-enhanced="true">
      <div className="lab-iframe-embed__header">
        <p className="lab-iframe-embed__eyebrow">{eyebrow}</p>
        <h3>{heading}</h3>
        <p className="lab-iframe-embed__lede">{lede}</p>
      </div>

      <div className="lab-iframe-embed__actions">
        <a
          className="lab-iframe-embed__link"
          href={src}
          rel="noreferrer"
          target="_blank"
        >
          Open in New Tab
        </a>
        <span className="lab-iframe-embed__status" aria-live="polite">
          {hasErrored
            ? "The embedded view is unavailable right now."
            : hasLoaded
              ? "The embedded tool is ready below."
              : "Loading the embedded tool..."}
        </span>
      </div>

      <div className="lab-iframe-embed__frame-shell">
        <iframe
          className="lab-iframe-embed__frame"
          loading="lazy"
          onError={() => setHasErrored(true)}
          onLoad={() => setHasLoaded(true)}
          referrerPolicy="no-referrer"
          src={src}
          title={title}
        />
      </div>

      <p className="lab-iframe-embed__fallback">
        If the embedded tool does not appear, open it in a new tab and continue
        from there.
      </p>
    </section>
  );
}
