import type { ReactNode, CSSProperties } from 'react';

type Space = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';

const spaceValues: Record<Space, string> = {
  none: '0',
  xs: '0.25rem',
  sm: '0.5rem',
  md: '1rem',
  lg: '1.5rem',
  xl: '2rem',
};

interface StackProps {
  children: ReactNode;
  gap?: Space;
  className?: string;
  style?: CSSProperties;
}

/**
 * Stack - vertical layout with consistent gaps
 */
export function Stack({ children, gap = 'md', className = '', style }: StackProps) {
  return (
    <div
      className={`stack ${className}`}
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: spaceValues[gap],
        ...style,
      }}
    >
      {children}
    </div>
  );
}

interface ClusterProps {
  children: ReactNode;
  gap?: Space;
  justify?: 'start' | 'center' | 'end' | 'between';
  align?: 'start' | 'center' | 'end' | 'baseline';
  wrap?: boolean;
  className?: string;
}

/**
 * Cluster - horizontal layout with wrapping
 */
export function Cluster({
  children,
  gap = 'sm',
  justify = 'start',
  align = 'center',
  wrap = true,
  className = '',
}: ClusterProps) {
  const justifyMap = {
    start: 'flex-start',
    center: 'center',
    end: 'flex-end',
    between: 'space-between',
  };

  const alignMap = {
    start: 'flex-start',
    center: 'center',
    end: 'flex-end',
    baseline: 'baseline',
  };

  return (
    <div
      className={`cluster ${className}`}
      style={{
        display: 'flex',
        flexWrap: wrap ? 'wrap' : 'nowrap',
        gap: spaceValues[gap],
        justifyContent: justifyMap[justify],
        alignItems: alignMap[align],
      }}
    >
      {children}
    </div>
  );
}

interface BoxProps {
  children: ReactNode;
  padding?: Space;
  className?: string;
  style?: CSSProperties;
  as?: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer';
}

/**
 * Box - padded container
 */
export function Box({
  children,
  padding = 'md',
  className = '',
  style,
  as: Component = 'div',
}: BoxProps) {
  return (
    <Component
      className={`box ${className}`}
      style={{
        padding: spaceValues[padding],
        ...style,
      }}
    >
      {children}
    </Component>
  );
}

interface DividerProps {
  char?: string;
  length?: number;
}

/**
 * Divider - horizontal rule in terminal style
 */
export function Divider({ char = '~', length = 40 }: DividerProps) {
  return (
    <div className="divider" aria-hidden="true">
      {char.repeat(length)}
    </div>
  );
}