import type { ReactNode } from 'react'
import { Link } from 'react-router-dom'

import { Logo } from '@/components/layout/Logo'
import { ThemeToggle } from '@/components/ui'

/**
 * Frame for the credential screens.
 *
 * Kept narrow and free of navigation: someone signing in or resetting a
 * password has one task, and a full marketplace header competes with it. The
 * trust note at the foot is here rather than on the marketing pages because
 * this is where people hesitate.
 */
export function AuthLayout({
  title,
  description,
  children,
  footer,
}: {
  title: string
  description?: string
  children: ReactNode
  footer?: ReactNode
}) {
  return (
    <div className="flex min-h-dvh flex-col bg-canvas">
      <div className="container-page flex h-16 items-center justify-between">
        <Link to="/" aria-label="Domainsansar home">
          <Logo />
        </Link>
        <ThemeToggle />
      </div>

      <div className="flex flex-1 items-center justify-center px-4 py-8 sm:py-12">
        <div className="w-full max-w-[26rem]">
          <div className="mb-7">
            <h1 className="text-2xl font-semibold tracking-[-0.02em] text-text-primary">
              {title}
            </h1>
            {description !== undefined && (
              <p className="mt-2 text-sm text-text-secondary">{description}</p>
            )}
          </div>

          {children}

          {footer !== undefined && <div className="mt-6 text-sm text-text-secondary">{footer}</div>}
        </div>
      </div>

      <div className="container-page py-6">
        <p className="text-center text-xs text-text-muted">
          Protected by rate limiting and optional two-factor authentication.{' '}
          <Link to="/help/security" className="underline underline-offset-2 hover:text-text-secondary">
            How we secure accounts
          </Link>
        </p>
      </div>
    </div>
  )
}