<template>
  <span
    class="badge rounded-pill me-1"
    :class="{
      'bg-chill-red': props.new_state == 'closed',
      'bg-chill-green': props.new_state == 'open',
    }"
  >
    <template v-if="props.new_state == 'open'">
      {{ trans(CHILL_TICKET_TICKET_BANNER_OPEN) }}
    </template>
    <template v-else-if="props.new_state == 'closed'">
      {{ trans(CHILL_TICKET_TICKET_BANNER_CLOSED) }}
    </template>
  </span>
</template>

<script setup lang="ts">
// Types
import { StateChange } from "../../../../types";

// Translations
import {
  trans,
  CHILL_TICKET_TICKET_BANNER_OPEN,
  CHILL_TICKET_TICKET_BANNER_CLOSED,
} from "translator";
const props = defineProps<StateChange>();
</script>

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