import { UserIcon, KeyIcon, MailIcon } from './Icons';
import Link from 'next/link';

/** Narrow card for sign-in, registration and emailed-link pages */
export function AuthCard({ title, intro, children, footer }: { title: string; intro?: React.ReactNode; children: React.ReactNode; footer?: React.ReactNode }) {
  return (
    <div className="mx-auto max-w-md px-4 py-12 sm:py-16">
      <div className="card p-6 sm:p-8">
        <h1 className="flex items-center gap-2 font-serif text-2xl font-semibold tracking-tight">{title.toLowerCase().includes('password') ? <KeyIcon className="h-5 w-5 text-ledger" /> : title.toLowerCase().includes('email') ? <MailIcon className="h-5 w-5 text-ledger" /> : <UserIcon className="h-5 w-5 text-ledger" />}<span>{title}</span></h1>
        {intro && <p className="mb-6 mt-2 text-sm leading-relaxed text-ink-2">{intro}</p>}
        {children}
      </div>
      {footer && <div className="mt-5 text-center text-sm text-muted">{footer}</div>}
      <p className="mt-6 text-center text-xs text-muted">
        Lawyers and firms:{' '}
        <Link href="/for-lawyers/" className="link">
          sign in to your professional dashboard
        </Link>
        .
      </p>
    </div>
  );
}