import Link from "next/link";
import type { ReactNode } from "react";

interface PageShellProps {
  title: string;
  /** Optional subtitle under the title */
  description?: string;
  children: ReactNode;
  /** Optional return control shown top-left above the title */
  backHref?: string;
  backLabel?: string;
}

/**
 * Consistent page header (title + description) used by every route.
 */
export function PageShell({
  title,
  description,
  children,
  backHref,
  backLabel = "Back",
}: PageShellProps) {
  return (
    <div className="mx-auto w-full max-w-6xl">
      <div className="mb-6 sm:mb-8">
        {backHref ? (
          <Link
            href={backHref}
            className="mb-3 inline-flex min-h-10 items-center gap-1.5 py-1 text-sm text-muted-foreground transition-colors hover:text-foreground sm:mb-4"
          >
            <span aria-hidden className="text-base leading-none">
              ←
            </span>
            {backLabel}
          </Link>
        ) : null}
        <h1 className="font-display text-xl font-semibold tracking-tight sm:text-2xl">
          {title}
        </h1>
        {description ? (
          <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">
            {description}
          </p>
        ) : null}
      </div>
      {children}
    </div>
  );
}