import Button, { ButtonProps } from '../button'
import { useStyleConfig, vui } from '../core'
import { cs } from '../utils'
import { useTagContext } from './context'

/** Displays a button within the Tag. */
export const TagButton = vui<'button', ButtonProps>((props, ref) => {
  const { className, ...rest } = props
  const mergedProps = { ...useTagContext(), ...props }
  const styles = useStyleConfig('Tag', useTagContext())

  return (
    <Button
      borderColor="transparent"
      className={cs('vui-tagButton', className)}
      disabled={mergedProps.disabled}
      hoverBorderColor="transparent"
      icon="falTimes"
      mr={-0.5}
      ref={ref}
      variant={mergedProps.variant}
      {...styles.button}
      {...rest}
    />
  )
})

TagButton.displayName = 'TagButton'

export default TagButton
