<script lang="ts">
  import cx from "classnames"
  import type {RoleDefinition} from "@app/core/roles"
  import {roleColorToCSS} from "@app/core/roles"

  type Props = {
    role: RoleDefinition
    class?: string
  }

  const {role, ...props}: Props = $props()

  const style = $derived(
    role.color === undefined
      ? ""
      : `color: ${roleColorToCSS(role.color)}; border-color: ${roleColorToCSS(role.color)};`,
  )

  const className = $derived(cx("badge badge-outline badge-sm", props.class))
</script>

<span class={className} {style}>
  {role.label || role.name}
</span>
