import React from 'react'

import { vui } from '../core'
import { Tag, TagProps } from '../tag'
import { Dict } from '../utils'
import { BadgeProps } from './badge.types'
import theme from './theme'

/**
 * Badges are round, non-interactive tags.
 *
 * These components are used for displaying information only; they might be used as a “counter” for push notifications.
 */

export const Badge = vui<'span', BadgeProps>((props, ref) => {
  const { variant, ...rest } = props as TagProps
  const { variants } = (theme as Dict) ?? {}

  const bg = variants[variant ?? 'subtleSandstone'].container.bg
  const color = variants[variant ?? 'subtleSandstone'].container.color

  return (
    <Tag
      bg={bg}
      className="vui-badge"
      color={color}
      isInteractive={false}
      isRound
      minW="20px"
      ref={ref}
      {...rest}
      onDelete={undefined}
    />
  )
})

Badge.displayName = 'Badge'
export default Badge
