import React from 'react';
import styles from './index.less';

export default function Space({ size = 8, children }) {
  const childNodes = React.Children.toArray(children).filter((d) => !!d);
  if (childNodes.length <= 1) {
    return children;
  } else {
    return (
      <div className={styles.space}>
        {childNodes.map((child, index) => (
          <div key={index} style={index === childNodes.length - 1 ? {} : { marginRight: size }}>
            {child}
          </div>
        ))}
      </div>
    );
  }
}
