import type { ReactNode } from 'react'
import { AuthTicketIcon, SceneDecor } from './AuthDecor'
import { ThemeToggle } from './ThemeToggle'

export function AuthShell({
  children,
  tagline = '準備好巡樓了嗎？',
}: {
  children: ReactNode
  tagline?: string
}) {
  return (
    <div className="hx-scene auth-scene p-4 sm:p-6">
      <SceneDecor />

      <div className="absolute top-4 right-4 z-20 sm:top-5 sm:right-5">
        <ThemeToggle compact />
      </div>

      <div className="auth-shell relative z-10 w-full max-w-xl">
        <div className="auth-ticket">
          <div className="auth-ticket-body ac-dialog-texture">
            <div className="auth-welcome">
              <AuthTicketIcon />
              <div className="min-w-0 flex-1">
                <p className="display-en text-[11px] font-semibold tracking-[0.16em] text-accent uppercase">
                  Haixun Patrol
                </p>
                <p className="text-lg font-bold leading-snug text-ink sm:text-xl">巡樓管理台</p>
                <p className="mt-0.5 text-sm font-semibold text-brand">{tagline}</p>
              </div>
            </div>
            {children}
          </div>
        </div>
      </div>
    </div>
  )
}