/** @jsx jsx */
import { jsx } from '@emotion/core';
import { bool, string, oneOfType, number, node, arrayOf } from 'prop-types';
import * as React from 'react';
import Box from '../Box';
import css from '@styled-system/css';
import { supportsFlexGap } from '../../../utils/featureDetect';
import Divider from '../../Divider';

const flexGapSupported = supportsFlexGap();

const Stack = ({ gap = 'gutter', children, dividers = false, ...rest }) => {
  return (
    <Box
      css={css({
        '> * + *': flexGapSupported
          ? undefined
          : {
              marginTop: gap,
            },
        rowGap: flexGapSupported ? gap : undefined,
      })}
      display="flex"
      flexDirection="column"
      {...rest}
    >
      {React.Children.toArray(children)
        .filter(Boolean)
        .map((child, i) => (
          <React.Fragment key={i}>
            {dividers && i > 0 && <Divider />}
            {child}
          </React.Fragment>
        ))}
    </Box>
  );
};

Stack.propTypes = {
  children: node,
  gap: oneOfType([string, number, arrayOf(oneOfType([string, number]))]),
  dividers: bool,
};

export default Stack;