import type { ReactNode } from 'react'
import { ThemeToggle } from './ThemeToggle'

export function AuthShell({ children }: { children: ReactNode }) {
  return (
    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-canvas p-6">
      <div className="absolute top-5 right-5 z-20">
        <ThemeToggle />
      </div>
      <div
        aria-hidden
        className="glow-blob pointer-events-none absolute -top-24 -right-16 h-72 w-72 rounded-full opacity-70 blur-3xl"
      />
      <div
        aria-hidden
        className="glow-blob-alt pointer-events-none absolute -bottom-20 -left-10 h-64 w-64 rounded-full opacity-80 blur-3xl"
      />
      <div className="relative z-10 w-full max-w-md">
        <div className="mb-8 text-center">
          <p className="display-en text-xs font-semibold tracking-[0.2em] text-brand uppercase">Haixun Patrol</p>
          <h1 className="mt-2 text-3xl font-black text-ink">巡樓管理系統</h1>
          <p className="mt-2 text-sm text-ink-secondary">智慧巡檢 · 任務追蹤 · 即時協作</p>
        </div>
        {children}
      </div>
    </div>
  )
}