import Link from "next/link";

type StatusPageProps = {
  code: string;
  title: React.ReactNode;
  description?: string;
  action?: { href: string; label: string };
  children?: React.ReactNode;
};

/** Plantilla común para 404 / 401 / 403 / 500. */
export function StatusPage({ code, title, description, action, children }: StatusPageProps) {
  return (
    <main className="flex min-h-dvh items-center justify-center bg-chesco-black px-6 py-16 text-chesco-white">
      <div className="max-w-xl text-center">
        <p className="font-display text-sm font-semibold tracking-[0.3em] text-chesco-red">
          {code}
        </p>
        <h1 className="mt-4 font-display text-3xl font-extrabold uppercase leading-tight md:text-5xl">
          {title}
        </h1>
        {description && <p className="mt-4 text-chesco-metallic">{description}</p>}
        {action && (
          <Link
            href={action.href}
            className="mt-8 inline-block rounded-chesco-sm bg-chesco-red px-6 py-3 font-display text-sm font-semibold uppercase tracking-wide transition duration-200 hover:-translate-y-0.5 hover:bg-chesco-red-hover"
          >
            {action.label}
          </Link>
        )}
        {children}
      </div>
    </main>
  );
}