import React from 'react';
import "./Space.scss"

const parseSize: any = {
  sm: 'sm',
  lg: 'lg',
}

interface SpaceProps {
  className?: string;
  direction?: 'horizontal' | 'vertical';
  size?: string | 'sm' | 'lg';
  align?: 'start' | 'end' | 'center' | 'baseline';
  wrap?: boolean;
  style?: React.CSSProperties;
}

const Space = ({ className, direction, size='sm', align, wrap, style={}, ...props }: SpaceProps) => {
  const isSizeClass = parseSize[size];
  if (size && !isSizeClass) {
    style.gap = size;
  } else {
    style.gap = undefined;
  }
  return (
    <div
      style={{ ...style }}
      className={`bt-space ${direction} ${isSizeClass ? size : ''} ${align ? align : ''} ${wrap ? 'wrap' : ''} ${className}`}
      {...props}
    />
  );
};

export default Space;
export { Space };