"use client";

import type { ReactNode } from "react";
import { Breadcrumbs, type Crumb } from "@/components/ui/Breadcrumbs";
import { PageTransition } from "@/components/motion/PageTransition";
import { Reveal } from "@/components/motion/Reveal";
import { cn } from "@/lib/cn";

type PageShellProps = {
  children: ReactNode;
  crumbs?: Crumb[];
  title?: string;
  description?: string;
  eyebrow?: string;
  wide?: boolean;
  className?: string;
  actions?: ReactNode;
};

/**
 * Standard storefront page frame:
 * transition + max-width + breadcrumbs + premium page header.
 */
export function PageShell({
  children,
  crumbs,
  title,
  description,
  eyebrow,
  wide = true,
  className,
  actions,
}: PageShellProps) {
  return (
    <PageTransition>
      <div
        className={cn(
          "mx-auto w-full px-4 py-8 sm:px-6 lg:px-8 lg:py-12",
          wide ? "max-w-7xl" : "max-w-3xl",
          className,
        )}
      >
        {crumbs ? <Breadcrumbs items={crumbs} /> : null}
        {title ? (
          <Reveal className="mb-8 flex flex-wrap items-end justify-between gap-4 sm:mb-10">
            <div className="max-w-2xl">
              {eyebrow ? (
                <p className="mb-2 text-[11px] font-medium uppercase tracking-[0.22em] text-muted">
                  {eyebrow}
                </p>
              ) : null}
              <h1 className="text-3xl font-semibold tracking-tight text-foreground sm:text-4xl lg:text-[2.75rem] lg:leading-tight">
                {title}
              </h1>
              {description ? (
                <p className="mt-3 max-w-xl text-sm leading-relaxed text-muted sm:text-[15px]">
                  {description}
                </p>
              ) : null}
            </div>
            {actions}
          </Reveal>
        ) : null}
        {children}
      </div>
    </PageTransition>
  );
}