<template>
  <section class="flex flex-col items-center p-4">
    <p class="text-center text-xl font-semibold uppercase">{{ hostName }}</p>
    <div class="relative h-[140px] w-[140px]" :class="statusColorClass">
      <svg class="h-full w-full -rotate-90" viewBox="0 0 120 120" aria-label="Pourcentage restant">
        <circle
          class="fill-none stroke-[rgba(255,255,255,0.22)] [stroke-width:10]"
          cx="60"
          cy="60"
          :r="chartRadius"
        />
        <circle
          class="fill-none stroke-[currentColor] [stroke-linecap:round] [stroke-width:10] transition-[stroke-dashoffset] duration-300"
          cx="60"
          cy="60"
          :r="chartRadius"
          :style="{ strokeDasharray: `${chartCircumference}`, strokeDashoffset: `${chartOffset}` }"
        />
      </svg>
      <div class="absolute inset-0 flex flex-col items-center justify-center">
        <strong class="text-2xl leading-none">{{ remainingPercentText }}</strong>
      </div>
    </div>

    <p class="mt-1 text-center text-sm font-semibold">{{ usedText }} / {{ totalText }}</p>
  </section>
</template>

<script setup lang="ts">
defineProps<{
  hostName: string
  statusColorClass: string
  chartRadius: number
  chartCircumference: number
  chartOffset: number
  remainingPercentText: string
  usedText: string
  totalText: string
}>()
</script>

<style scoped>
.m-success {
  color: rgb(var(--m-success));
}

.m-error {
  color: rgb(var(--m-error));
}
</style>
