<template>
  <div
    class="status-badge rounded-full max-w-[95px] w-fit px-3 inline-flex items-center text-[#ffffff] text-[14px] mr-2"
    :class="{
      'badge-activated': isActivated,
      'badge-deactivated': !isActivated,
      'bg-[#0099FF]': isActivated,
      'bg-[#C9CDD4]': !isActivated,
    }"
  >
    {{ displayText }}
  </div>
</template>

<script setup>
// The Lucia project.
// Copyright 2024-2026 DSP, inc.  All rights reserved.
// Authors:
//   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
//   imacat.yang@dsp.im (imacat), 2023/9/23
/**
 * @module components/Badge Status badge component that displays
 *   an activated/deactivated state with colored background.
 */

defineProps({
  isActivated: {
    type: Boolean,
    required: true,
    default: true,
  },
  displayText: {
    type: String,
    required: true,
    default: "Status",
  },
});
</script>
