<template>
  <div
    class="badge"
    :class="[severity]"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
interface ComponentProps {
    uptime?: number
}

const props = defineProps<ComponentProps>()

const severity = computed<string | null>(() => {
    if (props.uptime === undefined) {
        return null
    }

    if (props.uptime < 50) {
        return 'danger'
    }

    if (props.uptime < 98) {
        return 'warning'
    }

    return 'success'
})
</script>

<style scoped lang="scss">
.badge {
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #27272a;
  border-radius: 8px;
  width: fit-content;

  &.success {
    background-color: color-mix(in srgb, #22c55e, transparent 0%);
    color: white;
  }

  &.warning {
    background-color: color-mix(in srgb, #f97316, transparent 0%);
    color: white;
  }

  &.danger {
    background-color: color-mix(in srgb, #ef4444, transparent 0%);
    color: white;
  }

}
</style>
