import type { ReactNode } from "react";

import { cn } from "@/lib/utils";

/**
 * Chrome shared by every catalogue route: a title block, the filter bar and a
 * consistent content rhythm. The hero gradient is decorative and is only shown
 * on the first page so that page 3 of a filtered set stays compact.
 */
export function BrowseShell({
  title,
  description,
  hero = false,
  children,
  className,
}: {
  title: string;
  description?: string;
  hero?: boolean;
  children: ReactNode;
  className?: string;
}) {
  return (
    <main className={cn("pb-24", className)}>
      <header
        className={cn(
          "relative overflow-hidden",
          hero
            ? "border-b border-line pb-10 pt-10 md:pb-14 md:pt-14"
            : "border-b border-line pb-7 pt-8 md:pt-10",
        )}
      >
        {hero ? (
          <div aria-hidden className="pointer-events-none absolute inset-0 -z-10">
            <div className="absolute -top-48 left-1/3 h-[420px] w-[560px] rounded-full bg-brand-600/16 blur-[140px]" />
            <div className="absolute inset-0 bg-linear-to-b from-brand-900/12 to-transparent" />
          </div>
        ) : null}

        <div className="mx-auto w-full max-w-[1600px] px-4 sm:px-6 lg:px-10">
          <h1
            className={cn(
              "font-display font-extrabold tracking-[-0.03em] text-balance text-ink",
              hero ? "text-4xl md:text-5xl" : "text-3xl md:text-4xl",
            )}
          >
            {title}
          </h1>
          {description ? (
            <p className="mt-3 max-w-2xl text-[15px] leading-relaxed text-ink-muted">
              {description}
            </p>
          ) : null}
        </div>
      </header>

      <div className="mx-auto w-full max-w-[1600px] px-4 pt-7 sm:px-6 lg:px-10">
        {children}
      </div>
    </main>
  );
}