"use client";

import type { ReactNode } from "react";
import { CREATE_FLOW_PAGE_GUTTER_CLASS } from "./createFlowLayoutTokens";

export type CreateFlowStepShellVariant =
  | "centeredNarrow"
  | "centeredNarrowBottomPad"
  | "wideGrid"
  | "wideGridLoosePadding"
  | "bare";

/** Semantic top padding below create-flow top nav (applied at all breakpoints; name is legacy). */
export type CreateFlowContentTopBelowMd = "none" | "space-1400" | "space-800";

const outerByVariant: Record<CreateFlowStepShellVariant, string> = {
  centeredNarrow: `flex w-full min-w-0 flex-col items-center ${CREATE_FLOW_PAGE_GUTTER_CLASS}`,
  centeredNarrowBottomPad: `flex w-full min-w-0 flex-col items-center ${CREATE_FLOW_PAGE_GUTTER_CLASS} pb-28 md:pb-32`,
  /** Wide two-column steps; inner content supplies the 1328px cap. */
  wideGrid: `flex w-full min-w-0 shrink-0 flex-col items-center ${CREATE_FLOW_PAGE_GUTTER_CLASS}`,
  /** Create Community review + card grid; inner content supplies the 1440px cap. */
  wideGridLoosePadding: `flex w-full min-w-0 shrink-0 flex-col items-center ${CREATE_FLOW_PAGE_GUTTER_CLASS}`,
  bare: "w-full min-w-0",
};

const contentTopBelowMdClass: Record<CreateFlowContentTopBelowMd, string> = {
  none: "",
  "space-1400": "pt-[var(--space-1400)]",
  "space-800": "pt-[var(--space-800)]",
};

interface CreateFlowStepShellProps {
  children: ReactNode;
  variant?: CreateFlowStepShellVariant;
  /** Top spacing below top chrome (`CreateFlowTextFieldScreen` defaults to `space-1400`). */
  contentTopBelowMd?: CreateFlowContentTopBelowMd;
  className?: string;
}

/**
 * Shared horizontal padding and width constraints for create-flow step pages.
 * Gutters come from {@link CREATE_FLOW_PAGE_GUTTER_CLASS} (`md` / `lg` track
 * `--breakpoint-md` and `--breakpoint-lg` in `app/tailwind.css`).
 */
export function CreateFlowStepShell({
  children,
  variant = "centeredNarrow",
  contentTopBelowMd = "none",
  className = "",
}: CreateFlowStepShellProps) {
  const topClass = contentTopBelowMdClass[contentTopBelowMd];
  return (
    <div
      className={`${outerByVariant[variant]} ${topClass} ${className}`.trim()}
    >
      {children}
    </div>
  );
}