import { ButtonProps, TextButton } from '../button'
import { useStyleConfig, vui } from '../core'
import { PopoverTrigger } from '../popover'
import { cs } from '../utils'
import { useMenuContext } from './context'

/** Displays PopoverTrigger as a button. */
export const MenuButton = vui<'button', ButtonProps>((props, ref) => {
  const { className, ...rest } = props
  const styles = useStyleConfig('Menu', useMenuContext())

  return (
    <PopoverTrigger
      as={TextButton}
      className={cs('vui-menuButton', className)}
      ref={ref}
      {...styles.button}
      {...rest}
    />
  )
})

MenuButton.displayName = 'MenuButton'

export default MenuButton
