import type { ReactNode } from 'react'
import { Logo } from '@/components/logo'
import { ThemeToggle } from '@/components/theme-toggle'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { useDocumentTitle } from '@/lib/use-document-title'

/** Giriş / kayıt ekranlarının ortak çerçevesi: ortada kart, üstte logo. */
export function AuthShell({
  title,
  description,
  footer,
  children,
}: {
  title: string
  description: string
  footer: ReactNode
  children: ReactNode
}) {
  useDocumentTitle(title)
  return (
    <div className="flex min-h-dvh flex-col bg-muted/40">
      <div className="flex justify-end p-3">
        <ThemeToggle compact />
      </div>
      <main className="flex flex-1 flex-col items-center px-4 pb-10 sm:justify-center">
        <Logo size={52} withText className="mb-6" />
        <Card className="w-full max-w-md">
          <CardHeader>
            <CardTitle className="text-xl">
              <h1>{title}</h1>
            </CardTitle>
            <CardDescription>{description}</CardDescription>
          </CardHeader>
          <CardContent>{children}</CardContent>
        </Card>
        <p className="mt-6 text-sm text-muted-foreground">{footer}</p>
      </main>
    </div>
  )
}