<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>
  import { defineComponent } from 'vue';
  
  export default defineComponent({
    props: {
      isActivated: {
        type: Boolean,
        required: true,
        default: true,
      },
      displayText: {
        type: String,
        required: true,
        default: "Status",
      }
    },
    setup(props) {
      return {
        isActivated: props.isActivated,
        displayText: props.displayText,
      };
    }
  });
  </script>