// @design-system: layout/Row
/**
 * Row - horizontal flex container using token-based gap.
 * Uses logical properties (items-start/end → ok; never left/right).
 *
 * @example
 * <Row gap="3" justify="between" align="center">
 *   <span>Label</span>
 *   <Badge />
 * </Row>
 */

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' | 'baseline';
type JustifyKey = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';

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',
  baseline: 'items-baseline',
};

const justifyMap: Record<JustifyKey, string> = {
  start: 'justify-start',
  center: 'justify-center',
  end: 'justify-end',
  between: 'justify-between',
  around: 'justify-around',
  evenly: 'justify-evenly',
};

export interface RowProps {
  children: ReactNode;
  gap?: SpacingKey;
  align?: AlignKey;
  justify?: JustifyKey;
  wrap?: boolean;
  className?: string;
  as?: React.ElementType;
}

export function Row({
  children,
  gap = '3',
  align = 'center',
  justify = 'start',
  wrap = false,
  className,
  as: Tag = 'div',
}: RowProps) {
  return (
    <Tag
      className={cn(
        'flex',
        wrap ? 'flex-wrap' : 'flex-nowrap',
        gapMap[gap],
        alignMap[align],
        justifyMap[justify],
        className,
      )}
    >
      {children}
    </Tag>
  );
}