export function LiveboardsPage() {
  const embedRef1 = useEmbedRef<typeof LiveboardEmbed>();
  const embedRef2 = useEmbedRef<typeof LiveboardEmbed>();

  const { liveboardIdOne, embedConfig } = useAppConfig();
  const [activeTab, setActiveTab] = useState<"liveboard1" | "liveboard2">(
    "liveboard1"
  );

  return (
    <div className="MyLiveboardContainer">
      <div className="tab-bar">
        <button
          className={`tab ${activeTab === "liveboard1" ? "active" : ""}`}
          onClick={() => setActiveTab("liveboard1")}
        >
          Liveboard 1
        </button>
        <button
          className={`tab ${activeTab === "liveboard2" ? "active" : ""}`}
          onClick={() => setActiveTab("liveboard2")}
        >
          Liveboard 2
        </button>
      </div>

      {/* Keep both liveboards mounted, but toggle visibility */}
      <HostEventBar
        embedRef={activeTab === "liveboard1" ? embedRef1 : embedRef2}
      />
      <div className="liveboard-container">
        <div
          className={`liveboard-wrapper ${
            activeTab === "liveboard1" ? "visible" : "hidden"
          }`}
        >
          <LiveboardEmbed
            liveboardId={liveboardIdOne || LB_ONE}
            frameParams={{ height: "100vh" }}
            ref={embedRef1}
          />
        </div>
        <div
          className={`liveboard-wrapper ${
            activeTab === "liveboard2" ? "visible" : "hidden"
          }`}
        >
          <LiveboardEmbed
            liveboardId={LB_ONE}
            frameParams={{ height: "100vh" }}
            ref={embedRef2}
          />
        </div>
      </div>
    </div>
  );
}

export function LiveboardsPage() {
  const embedRef1 = useEmbedRef<typeof LiveboardEmbed>();
  const embedRef2 = useEmbedRef<typeof LiveboardEmbed>();

  const { liveboardIdOne, embedConfig } = useAppConfig();
  const [activeTab, setActiveTab] = useState<"liveboard1" | "liveboard2">(
    "liveboard1"
  );

  return (
    <div className="MyLiveboardContainer">
      <div className="tab-bar">
        <button
          className={`tab ${activeTab === "liveboard1" ? "active" : ""}`}
          onClick={() => setActiveTab("liveboard1")}
        >
          Liveboard 1
        </button>
        <button
          className={`tab ${activeTab === "liveboard2" ? "active" : ""}`}
          onClick={() => setActiveTab("liveboard2")}
        >
          Liveboard 2
        </button>
      </div>

      {/* Keep both liveboards mounted, but toggle visibility */}
      <HostEventBar
        embedRef={activeTab === "liveboard1" ? embedRef1 : embedRef2}
      />
      <div className="liveboard-container">
        <div
          className={`liveboard-wrapper ${
            activeTab === "liveboard1" ? "visible" : "hidden"
          }`}
        >
          <LiveboardEmbed
            liveboardId={liveboardIdOne || LB_ONE}
            frameParams={{ height: "100vh" }}
            ref={embedRef1}
          />
        </div>
        <div
          className={`liveboard-wrapper ${
            activeTab === "liveboard2" ? "visible" : "hidden"
          }`}
        >
          <LiveboardEmbed
            liveboardId={LB_ONE}
            frameParams={{ height: "100vh" }}
            ref={embedRef2}
          />
        </div>
      </div>
    </div>
  );
}