import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
import { cs, filterUndefined } from '../utils'
import { DividerProps } from './divider.types'

export const DividerBase = styled.hrBox`
  border-color: sandstone.90;
`

/** Visually separates content with a horizontal or vertical line. */
export const Divider = vui<'hr', DividerProps>((props, ref) => {
  const { className, isVertical, width, ...rest } = omitThemingProps(props)
  const styles = useStyleConfig('Divider', props)

  const borderSide = isVertical ? 'Right' : 'Bottom'
  const borderWidth = `border${borderSide}Width`
  const height = isVertical ? '100%' : ''

  const aliasedProps = filterUndefined({
    [borderWidth]: width ?? 1,
  })

  return (
    <DividerBase
      className={cs('vui-divider', className)}
      h={height}
      ref={ref}
      {...styles}
      {...aliasedProps}
      {...rest}
    />
  )
})

Divider.displayName = 'Divider'
export default Divider
