import { css } from 'styled-components'

export type CSSFlexArgs = {
  direction?: 'column' | 'row'
  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'justify-content'
  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse'
}

const DEFAULT_ARGS: CSSFlexArgs = {
  direction: 'row'
}

export const CSSFlex = ({
  alignItems,
  justifyContent,
  direction,
  wrap,
}: CSSFlexArgs = DEFAULT_ARGS) => css`
  display: flex;
  flex-direction: ${direction};
  ${alignItems && `align-items: ${alignItems};`};
  ${justifyContent && `justify-content: ${justifyContent};`};
  ${wrap && `flex-wrap: ${wrap};`};
`