'use client';

import {VStack} from '@astryxdesign/core/Layout';
import {PageHeader} from '@/shared/components/primitives/PageHeader';

/**
 * The container every Settings screen sits in.
 *
 * WHY THIS EXISTS
 * The Settings layout nests its own `Layout` inside the workspace shell, and
 * that nested `LayoutContent` was set to `padding={0}` so the sub-nav panel
 * could sit flush. The side effect was that it also cancelled the workspace's
 * own 20px gutter, so every Settings page rendered hard against the sub-nav on
 * the left and Loyaly AI divider on the right, with the title flush to the
 * top of the viewport. Eleven pages each fixing that themselves is how the
 * spacing drifts, so it is fixed once, here.
 *
 * THE SPACING CONTRACT
 *   Horizontal   32px  (spacing-8)  — clears the sub-nav and the Loyaly AI rail
 *   Top          32px  (spacing-8)  — the title never touches the header
 *   Bottom       48px  (pb-12)      — the last card is never flush to the fold
 *   Header → body 32px (spacing-8)  — title block reads as its own layer
 *   Between blocks 24px (spacing-6) — cards, tables and toolbars
 *
 * The bottom padding goes through the Tailwind bridge rather than a prop
 * because Astryx's `SpacingStep` union stops at 10 (40px) and there is no
 * `paddingBlockEnd` on Stack. `pb-12` resolves to `--spacing-12` (48px), so it
 * is still a token — no raw pixel value enters the codebase. It lands in the
 * `utilities` layer, which the cascade puts after `astryx-base`, so it wins
 * over the `paddingBlock` set below without `!important`.
 *
 * Anything that needs a different rhythm should take a prop here rather than
 * override locally — that is the whole point of a single container.
 */
export function SettingsPage({
  title,
  description,
  actions,
  toolbar,
  children,
}: {
  title: string;
  description?: string;
  /** Page-level verbs — Save, Add store, Rotate key. */
  actions?: React.ReactNode;
  /** Filters or segmented controls that scope this page's content. */
  toolbar?: React.ReactNode;
  children: React.ReactNode;
}) {
  return (
    <VStack
      as="section"
      paddingInline={8}
      paddingBlock={8}
      gap={8}
      className="pb-12"
      width="100%"
    >
      <PageHeader
        title={title}
        description={description}
        actions={actions}
      />

      {/* 24px between the body's own blocks — tighter than the 32px that
          separates the header from the body, so the page reads as
          "title, then a group of related panels" rather than a flat list. */}
      <VStack gap={6} width="100%">
        {toolbar}
        {children}
      </VStack>
    </VStack>
  );
}
