import Link from 'next/link';
import type { ReactNode } from 'react';
import { Logo } from '@/components/brand/Logo';

/** Full-screen sign-in layout shared by /host/login and /admin/login. */
export function LoginShell({ kicker, title, intro, children, footer }: { kicker: string; title: string; intro: ReactNode; children: ReactNode; footer?: ReactNode }) {
  return (
    <main id="main" tabIndex={-1} className="relative isolate flex min-h-dvh flex-col overflow-hidden outline-none">
      <div aria-hidden="true" className="bg-grid pointer-events-none absolute inset-0 -z-10 [mask-image:radial-gradient(60%_55%_at_50%_35%,#000,transparent_75%)]" />
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[70%] bg-[radial-gradient(45%_55%_at_50%_15%,rgb(124_92_255/0.28),transparent_70%),radial-gradient(35%_40%_at_80%_60%,rgb(34_211_238/0.12),transparent_70%)]"
      />
      <div className="container-page flex h-16 items-center">
        <Link href="/" className="-m-1 rounded-lg p-1" aria-label="PintRush home">
          <Logo size="md" />
        </Link>
      </div>
      <div className="container-page flex flex-1 items-center justify-center py-10">
        <div className="w-full max-w-md rounded-card border border-line bg-surface/90 p-6 shadow-lift sm:p-8">
          <p className="text-xs font-bold tracking-[0.2em] text-cyan uppercase">{kicker}</p>
          <h1 className="mt-2 font-display text-2xl font-bold tracking-[-0.02em] sm:text-3xl">{title}</h1>
          <p className="mt-2 text-sm leading-relaxed text-muted">{intro}</p>
          <div className="mt-6">{children}</div>
          {footer && <div className="mt-6 border-t border-line/70 pt-5 text-sm text-subtle">{footer}</div>}
        </div>
      </div>
    </main>
  );
}