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

export default function AuthLayout({ title, description, children, footer }: {
  title: string
  description: string
  children: ReactNode
  footer?: ReactNode
}) {
  return (
    <main className="login-page">
      <section className="login-card" aria-labelledby="login-title">
        <div className="login-brand"><a href="/login" aria-label="Magent sign in"><MagentMark /><span>Magent</span></a><span className="login-beta">Beta</span></div>
        <header><h1 id="login-title">{title}</h1><p>{description}</p></header>
        {children}
        {footer && <footer>{footer}</footer>}
      </section>
      <p className="login-credit">Grizzlyflix · Request. Watch. Enjoy.</p>
    </main>
  )
}