"use client";

import type { ReactNode } from "react";
import { CreateFlowHeaderLockup } from "./CreateFlowHeaderLockup";
import { CreateFlowStepShell } from "./CreateFlowStepShell";
import {
  CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
  CREATE_FLOW_MD_CENTERED_SHELL_CLASS,
  CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
  CREATE_FLOW_WIDE_MAX_CLASS,
} from "./createFlowLayoutTokens";

type CreateFlowCardStackStepShellProps = {
  lockupTitle: string;
  lockupDescription?: ReactNode;
  /** When true, the stack region exposes `aria-busy` while recommendations load. */
  stackBusy?: boolean;
  children: ReactNode;
};

/**
 * Centered lockup + card-stack layout shared by communication, membership, and
 * conflict-management steps (Figma compact card stack).
 */
export function CreateFlowCardStackStepShell({
  lockupTitle,
  lockupDescription,
  stackBusy = false,
  children,
}: CreateFlowCardStackStepShellProps) {
  return (
    <CreateFlowStepShell
      variant="wideGridLoosePadding"
      contentTopBelowMd="space-800"
      className={CREATE_FLOW_MD_CENTERED_SHELL_CLASS}
    >
      <div
        className={`flex w-full min-w-0 flex-col items-center gap-6 ${CREATE_FLOW_WIDE_MAX_CLASS}`}
      >
        <div className={CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}>
          <CreateFlowHeaderLockup
            title={lockupTitle}
            description={lockupDescription}
            justification="center"
          />
        </div>
        <div
          className={CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS}
          aria-busy={stackBusy}
        >
          {children}
        </div>
      </div>
    </CreateFlowStepShell>
  );
}