<template>
  <GnLoader v-if="state.status === 'loading'" circle :label="label" />
  <GnBadge v-else :variant="variant">{{ label }}</GnBadge>
</template>

<script setup>
import { computed } from "vue";
import { GnLoader, GnBadge } from "gnexus-ui-kit/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";
});

const variant = computed(() => {
  switch (props.state.status) {
    case "ready":
      return "success";
    case "error":
      return "danger";
    case "skipped":
    case "idle":
    default:
      return "secondary";
  }
});
</script>