<template>
  <div class="device-state" :class="`device-state-${state.status}`">
    <span v-if="state.status === 'loading'" class="spinner" aria-hidden="true"></span>
    <span class="device-state-label">{{ label }}</span>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  state: {
    type: Object,
    default: () => ({
      status: "idle",
      message: "Not loaded",
    }),
  },
});

const label = computed(() => {
  if (props.state.status === "ready") {
    return props.state.message || "ok";
  }

  if (props.state.status === "error") {
    return props.state.message || "Loading error";
  }

  if (props.state.status === "skipped") {
    return props.state.message || "Skipped";
  }

  return props.state.message || "Not loaded";
});
</script>