// @design-system: layout/Stack
/**
 * Stack - vertical flex container using token-based gap.
 *
 * @example
 * <Stack gap="4" align="start">
 *   <Card />
 *   <Card />
 * </Stack>
 */

import { type ReactNode } from 'react';
import { cn } from '@/lib/cn';

type SpacingKey = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12';
type AlignKey = 'start' | 'center' | 'end' | 'stretch';

const gapMap: Record<SpacingKey, string> = {
  '0': 'gap-0',
  '1': 'gap-1',
  '2': 'gap-2',
  '3': 'gap-3',
  '4': 'gap-4',
  '5': 'gap-5',
  '6': 'gap-6',
  '8': 'gap-8',
  '10': 'gap-10',
  '12': 'gap-12',
};

const alignMap: Record<AlignKey, string> = {
  start: 'items-start',
  center: 'items-center',
  end: 'items-end',
  stretch: 'items-stretch',
};

export interface StackProps {
  children: ReactNode;
  gap?: SpacingKey;
  align?: AlignKey;
  className?: string;
  as?: React.ElementType;
}

export function Stack({
  children,
  gap = '4',
  align = 'stretch',
  className,
  as: Tag = 'div',
}: StackProps) {
  return (
    <Tag className={cn('flex flex-col', gapMap[gap], alignMap[align], className)}>{children}</Tag>
  );
}