---
import type { HTMLAttributes } from "astro/types"
import { type BadgeVariant, badgeCva, badgeIconCva, badgeVariant } from "~ui/badge/classesBadge"
import Icon from "~ui/icon/Icon.astro"
import type { MayHaveClass } from "~ui/utils/MayHaveClass"

interface Props extends MayHaveClass {
  id?: string
  variant?: BadgeVariant

  icon?: string
  iconRight?: string
  iconClass?: string

  class?: string
  restProps?: HTMLAttributes<"svg">
}

const p = Astro.props
const v = p.variant ?? badgeVariant.outline
---

<span id={p.id} class={badgeCva(v, p.class)} {...p.restProps}>
  {p.icon && <Icon path={p.icon} class={badgeIconCva(v, p.iconClass)} />}
  <slot />
  {p.iconRight && <Icon path={p.iconRight} class={badgeIconCva(v, p.iconClass)} />}
</span>