import type { OctaneNode } from "octane";
import { CloudflareLogo } from "octane-kumo/components/cloudflare-logo";
import { ThemeToggle } from "../../src/components/theme-toggle";

export function ControlPlaneLayout({
  title,
  description,
  page,
  children,
}: {
  title: string;
  description: string;
  page?: string;
  children: OctaneNode;
}) {
  const overview = page ? "/connect" : "";
  return (
    <div className="onboarding">
      <a className="skip-link" href="#main-content">
        Skip to content
      </a>
      <header className="control-header">
        <a className="control-brand" href="/connect">
          <CloudflareLogo variant="glyph" className="control-brand-mark" />
          <span>Flarebot</span>
        </a>
        <span className="control-header-label">Installation management</span>
        <div className="control-header-actions">
          <ThemeToggle />
        </div>
      </header>
      <div className="control-layout">
        <nav className="control-nav" aria-label="Control plane navigation">
          <p>Manage Flarebot</p>
          <a href={`${overview}#cloudflare-account`}>Cloudflare account</a>
          <a href={`${overview}#installations`}>Installations</a>
          <a href={`${overview}#permissions`}>Permissions and access</a>
          {page && (
            <span className="control-nav-current" aria-current="page">
              {page}
            </span>
          )}
        </nav>
        <main id="main-content" tabIndex={-1}>
          <div className="control-page-heading">
            {page && (
              <nav className="control-breadcrumb" aria-label="Breadcrumb">
                <a href="/connect">Overview</a>
                <span aria-hidden="true">/</span>
                <span aria-current="page">{page}</span>
              </nav>
            )}
            <h1>{title}</h1>
            <p>{description}</p>
          </div>
          <div
            className={
              page ? "control-content control-detail" : "control-content"
            }
          >
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}