import * as ActionIcons from './Icons';
import Link from 'next/link';
import { BrandMark } from './BrandMark';
import { AlertIcon, ArrowLeftIcon } from './Icons';

/** Centered card for signed-out account pages (forgot/reset password, invitations, email confirmation) */
export function AuthShell({ title, description, children, backToLogin = true }: { title: string; description?: React.ReactNode; children: React.ReactNode; backToLogin?: boolean }) {
  return (
    <div className="flex min-h-screen items-center justify-center bg-paper px-4 py-12">
      <div className="w-full max-w-sm">
        <div className="mb-6 flex items-center gap-2.5">
          <BrandMark />
          <span className="font-serif text-lg font-semibold">Justice Choice</span>
        </div>
        <div className="card p-6">
          <h1 className="font-serif text-2xl font-semibold tracking-tight">{title}</h1>
          {description && <p className="mb-5 mt-1.5 text-sm text-muted">{description}</p>}
          {children}
        </div>
        {backToLogin && (
          <Link href="/login" className="mt-6 inline-flex items-center gap-1.5 text-sm text-muted hover:text-ink">
            <ArrowLeftIcon className="h-4 w-4" /> Back to sign in
          </Link>
        )}
      </div>
    </div>
  );
}

export function InvalidLink({ what, retry }: { what: string; retry?: { href: string; label: string } }) {
  return (
    <div className="space-y-4">
      <p role="alert" className="flex items-start gap-2 rounded-lg border border-danger/30 bg-danger-soft px-3 py-2.5 text-sm text-danger">
        <AlertIcon className="mt-0.5 h-4 w-4 shrink-0" />
        This {what} link is invalid, already used or expired.
      </p>
      {retry && (
        <Link href={retry.href} className="btn btn-primary w-full">
          <ActionIcons.RefreshIcon />{retry.label}
        </Link>
      )}
    </div>
  );
}