"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(
          "atelier py-8 lg:py-10",
          !wide && "max-w-[40rem]",
          className,
        )}
      >
        {crumbs ? <Breadcrumbs items={crumbs} /> : null}
        {title ? (
          <Reveal className="mb-7 flex flex-wrap items-end justify-between gap-4">
            <div className="max-w-xl">
              {eyebrow ? (
                <p className="mb-1.5 text-[10px] font-medium uppercase tracking-[0.22em] text-[var(--accent)]">
                  {eyebrow}
                </p>
              ) : null}
              <h1 className="font-display text-3xl leading-none text-foreground sm:text-4xl">
                {title}
              </h1>
              {description ? (
                <p className="mt-2 max-w-lg text-sm leading-relaxed text-muted">
                  {description}
                </p>
              ) : null}
            </div>
            {actions}
          </Reveal>
        ) : null}
        {children}
      </div>
    </PageTransition>
  );
}