import React from 'react'

import { useStyleConfig, vui } from '../core'
import Divider, { DividerProps } from '../divider'
import { cs } from '../utils'
import { useListContext } from './context'

/** Displays a divider line within the List. */
export const ListDivider = vui<'hr', DividerProps>((props, ref) => {
  const { className, ...rest } = props
  const styles = useStyleConfig('List', useListContext())

  return (
    <li>
      <Divider className={cs('vui-listDivider', className)} my={1} ref={ref} {...styles.divider} {...rest} />
    </li>
  )
})

ListDivider.displayName = 'ListDivider'
export default ListDivider
