import type { ReactNode } from "react";

import { Breadcrumbs, type BreadcrumbItem } from "@/components/layout/breadcrumbs";
import { cn } from "@/lib/utils";

type Props = {
  title: string;
  description?: string;
  breadcrumbs?: BreadcrumbItem[];
  actions?: ReactNode;
  children: ReactNode;
  className?: string;
  width?: "default" | "narrow" | "wide";
  /** `app` = dashboard / dense SaaS chrome; `marketing` = inner marketing pages */
  variant?: "marketing" | "app";
};

export function PageShell({
  title,
  description,
  breadcrumbs,
  actions,
  children,
  className,
  width = "default",
  variant = "marketing",
}: Props) {
  const isApp = variant === "app";

  return (
    <div
      className={cn(
        isApp ? "px-0 py-0" : "section-padding",
        "mx-auto w-full",
        width === "narrow" && "max-w-3xl",
        width === "default" && "max-w-7xl",
        width === "wide" && "max-w-[90rem]",
        className,
      )}
    >
      {breadcrumbs?.length ? (
        <Breadcrumbs items={breadcrumbs} className={cn(isApp ? "mb-5" : "mb-6")} />
      ) : null}
      <div
        className={cn(
          "flex flex-col gap-4",
          !isApp && "sm:flex-row sm:items-end sm:justify-between",
          isApp && "lg:flex-row lg:items-start lg:justify-between",
        )}
      >
        <div className="min-w-0">
          <h1
            className={cn(
              "font-display font-semibold tracking-tight text-foreground",
              isApp
                ? "text-2xl sm:text-3xl"
                : "text-3xl sm:text-4xl lg:text-[2.75rem]",
            )}
          >
            {title}
          </h1>
          {description ? (
            <p
              className={cn(
                "text-muted-foreground max-w-2xl leading-relaxed",
                isApp ? "mt-2 text-sm sm:text-[0.9375rem]" : "mt-3 text-base sm:text-lg",
              )}
            >
              {description}
            </p>
          ) : null}
        </div>
        {actions ? (
          <div className="flex shrink-0 flex-wrap items-center gap-2 sm:gap-3">{actions}</div>
        ) : null}
      </div>
      <div className={cn(isApp ? "mt-8 lg:mt-10" : "mt-10 lg:mt-12")}>{children}</div>
    </div>
  );
}