import type { ReactNode } from "react";
import { Link } from "react-router";
import { Button } from "./primitives";

/** The existing design-system page shell, shared without page-specific styling. */
export function PageLayout({
  children,
  header,
  mainId = "main",
  wordmarkTo = "/",
}: {
  children: ReactNode;
  header?: ReactNode;
  mainId?: string;
  wordmarkTo?: string;
}) {
  return (
    <div className="ds-root" id="top">
      <a
        className="ds-skip-link"
        href={`#${mainId}`}
        onClick={(event) => {
          event.preventDefault();
          document.getElementById(mainId)?.focus();
        }}
      >
        Skip to content
      </a>
      <header className="ds-header">
        <Link className="ds-wordmark" to={wordmarkTo}>
          minabot<span aria-hidden="true">.</span>
        </Link>
        {header}
      </header>
      <main id={mainId} className="ds-main" tabIndex={-1}>
        {children}
        <footer className="ds-footer">
          <span className="ds-wordmark">minabot.</span>
          <span>A little, every day.</span>
          <Button
            variant="text"
            onClick={() => window.scrollTo({ top: 0, behavior: "instant" })}
          >
            Back to top ↑
          </Button>
        </footer>
      </main>
    </div>
  );
}
