import type { ReactNode } from 'react';

export interface StackProps {
  /** A step on the space scale, 1 (tightest) to 9. Defaults to 5. */
  gap?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
  /** `start` keeps children at their natural width, which is what buttons want. */
  align?: 'start' | 'stretch';
  children?: ReactNode;
}

/** Vertical rhythm between blocks, always from the space scale. Never a raw pixel gap. */
export function Stack({ gap = 5, align = 'stretch', children }: StackProps) {
  return (
    <div style={{ display: 'grid', gap: `var(--space-${gap})`, justifyItems: align === 'start' ? 'start' : undefined }}>
      {children}
    </div>
  );
}