import React from 'react'

import { useStyleConfig, vui } from '../core'
import { T, TProps } from '../t'
import { cs } from '../utils'
import { useListContext } from './context'

/** Displays a heading within the List. */
export const ListHeading = vui<'li', TProps>((props, ref) => {
  const { className, ...rest } = props
  const styles = useStyleConfig('List', useListContext())

  return (
    <li>
      <T
        className={cs('vui-listHeading', className)}
        display="inline-block"
        px={2}
        py={1}
        ref={ref}
        size="sm"
        textTransform="uppercase"
        weight="medium"
        {...styles.heading}
        {...rest}
      />
    </li>
  )
})

ListHeading.displayName = 'ListHeading'
export default ListHeading
