import { useStyleConfig, vui } from '../core'
import Icon, { IconProp, IconProps } from '../icon'
import { cs } from '../utils'
import { useButtonContext } from './context'

const isConceptualIcon = (name?: IconProp) => name?.startsWith('con')

/** Displays an icon within the Button. */
export const ButtonIcon = vui<'svg', IconProps>((props, ref) => {
  const { className, name, ...rest } = props
  const styles = useStyleConfig('Button', useButtonContext())
  const verifiedName = isConceptualIcon(name) ? undefined : name

  return <Icon className={cs('vui-buttonIcon', className)} name={verifiedName} ref={ref} {...styles.icon} {...rest} />
})

ButtonIcon.displayName = 'ButtonIcon'
export default ButtonIcon
