import React from 'react'

import Box from '../Box'
import { BoxProps, ColorProp } from '../index'

export type DividerProps = {
  /**
   * The direction the dividing line should span.
   */
  axis?: 'horizontal' | 'vertical'

  /**
   * The color of the line
   */
  color?: ColorProp

  /**
   * Controls the space on sides opposite to the line's defined axis
   */
  margin?: number | string

  /**
   * The size of the line in pixels
   */
  size?: number
}

/**
 * Used to break up content
 */
export function Divider({
  axis = 'horizontal',
  color = 'separatorTertiary',
  margin = 0,
  size = 1,
  ...restProps
}: DividerProps) {
  const props = {
    as: 'div',
    alignSelf: 'stretch',
    backgroundColor: color,
  } as BoxProps
  if (axis === 'horizontal') {
    props.height = size + 'px'
    props.marginVertical = margin
  } else {
    props.width = size + 'px'
    props.marginHorizontal = margin
  }
  return <Box {...props} {...restProps} />
}