import { useStyleConfig, vui } from '../core'
import { PopoverContent } from '../popover'
import { cs } from '../utils'
import { useSelectContext } from './context'
import { SelectContentProps } from './select.types'

/** Extends PopoverContent to display given content is an overlaying box. */
export const SelectContent = vui<'div', SelectContentProps>((props, ref) => {
  const { className, ...rest } = props
  const styles = useStyleConfig('Select', useSelectContext())

  return (
    <PopoverContent
      className={cs('vui-selectContent', className)}
      column
      py={1}
      ref={ref}
      {...styles.content}
      {...rest}
    />
  )
})

SelectContent.displayName = 'SelectContent'

export default SelectContent
