import Image from "next/image"

/**
 * The frame for the two screens somebody sees before they are signed in.
 *
 * `AppShell` is wrong here: it carries a sidebar full of navigation that
 * nobody signed out is allowed to follow. What is left is the mark, so a
 * person knows which system is asking, and one column narrow enough to read.
 *
 * The column is `max-w-md` and centred, and below that it is simply the
 * screen minus its padding. That is the 390 px case, which is the one that
 * matters: this is opened on a phone more often than anything else here.
 *
 * `brandAs` decides whether the wordmark is the page heading. On the sign-in
 * screen it is: a heading that said "Sign in" would only repeat the button
 * underneath it. On the help screen the heading belongs to the help.
 *
 * The logo is served from `public/`, never fetched: this ships onto a LAN
 * with no internet. `width` and `height` reserve the space, the class decides
 * what renders.
 */
export function SignedOutShell({
  brandAs: Brand = "p",
  children,
}: {
  brandAs?: "h1" | "p"
  children: React.ReactNode
}) {
  return (
    <main className="flex min-h-svh flex-col items-center justify-center gap-6 p-4 sm:p-8">
      <div className="flex w-full max-w-md flex-col gap-6">
        <div className="flex items-center gap-3">
          <div className="flex aspect-square size-11 shrink-0 items-center justify-center rounded-lg bg-sidebar-accent">
            <Image
              src="/brand/logo-fixed_j6nfbz.svg"
              alt=""
              width={24}
              height={24}
              className="size-6"
              priority
            />
          </div>
          <div className="flex flex-col leading-tight">
            <Brand className="font-medium">Task Tracker</Brand>
            <span className="text-sm text-foreground/70">ADVMFR</span>
          </div>
        </div>
        {children}
      </div>
    </main>
  )
}