---
import Icon from './Icon.astro'

/** core/scss/ui/_badges.scss `.badge-{size}` modifier classes */
type BadgeSize = 'sm' | 'lg'

interface Props {
  text?: string
  color?: string
  size?: BadgeSize | undefined
  /** -lt soft colour variant */
  light?: boolean
  class?: string
  icon?: string
  iconEnd?: string
  /** remaining attributes (id, data-*, aria-*, …) are forwarded to the root element */
  [key: string]: unknown
}

const { text, color, size, light, class: className, icon, iconEnd, ...rest } = Astro.props

const classes = ['badge', size && `badge-${size}`, color && (light ? `bg-${color}-lt` : `bg-${color} text-${color}-fg`), className]
---

<span class:list={classes} {...rest}>{icon && <Icon name={icon} />}{text}{iconEnd && <Icon name={iconEnd} />}</span>