<script setup lang="ts">
import { UserGroup } from "../../../types";
import { computed } from "vue";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

interface UserGroupRenderBoxProps {
  userGroup: UserGroup;
}

const props = defineProps<UserGroupRenderBoxProps>();

const styles = computed<{ color: string; "background-color": string }>(() => {
  return {
    color: props.userGroup.foregroundColor,
    "background-color": props.userGroup.backgroundColor,
  };
});
</script>

<template>
  <span class="badge-user-group" :style="styles">{{
    localizeString(userGroup.label)
  }}</span>
</template>

<style scoped lang="scss"></style>
