import { useStyleConfig, vui, VuiComponent } from '../core'
import { List, ListDivider, ListHeading } from '../list'
import { cs } from '../utils'
import { useSelectContext } from './context'
import { SelectGroupProps } from './select.types'

/** Displays a list of options with optional heading to describe an individual group. */
export const SelectGroup = vui<'ul', SelectGroupProps>((props, ref) => {
  const { className, ...rest } = props
  const styles = useStyleConfig('Select', useSelectContext())

  return <List className={cs('vui-selectGroup', 'vui-allowScroll', className)} ref={ref} {...styles.group} {...rest} />
}) as VuiComponent<'ul', SelectGroupProps> & {
  Divider: typeof ListDivider
  Heading: typeof ListHeading
}

SelectGroup.Divider = ListDivider
SelectGroup.Heading = ListHeading

SelectGroup.displayName = 'SelectGroup'

export default SelectGroup
