<script setup lang="ts">
import { LoadingOutlined } from "@ant-design/icons-vue";
import { computed } from "vue";

import { getGenerateStatusMeta } from "@/lib/display";

const props = defineProps<{
  status?: string | null;
}>();

const statusMeta = computed(() => getGenerateStatusMeta(props.status));
const isLoading = computed(() => props.status === "queued" || props.status === "generating" || props.status === "running");
</script>

<template>
  <a-tag :color="statusMeta.color">
    <span class="article-generate-status">
      <LoadingOutlined v-if="isLoading" spin />
      <span>{{ statusMeta.label }}</span>
    </span>
  </a-tag>
</template>

<style scoped>
.article-generate-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
</style>
