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>
  );
}