<script setup lang="ts">
import type { PropType } from "vue";

defineProps({
  label: { type: String, required: true },
  value: { type: String, required: true },
  tone: {
    type: String as PropType<"alive" | "connecting" | "dead" | undefined>,
    default: undefined,
  },
});

const toneClass: Record<string, string> = {
  alive: "text-emerald-500",
  connecting: "text-yellow-500",
  dead: "text-destructive",
};
</script>

<template>
  <div class="rounded-md border border-border bg-card px-3 py-2 min-w-[5rem]">
    <div class="text-xs uppercase tracking-wide text-muted-foreground">
      {{ label }}
    </div>
    <div
      class="mt-0.5 text-lg font-semibold"
      :class="tone ? toneClass[tone] : ''"
    >
      {{ value }}
    </div>
  </div>
</template>
