<template>
  <div
    :style="status?.style"
    class="approveStatus flex items-center whitespace-nowrap"
  >
    <img
      v-if="status?.icon"
      :src="status?.icon"
      alt=""
      style="width: 16px"
      class="mr-2"
      srcset=""
    />
    {{ status?.label }}
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { eStatus, allStatus } from "./status";

const props = defineProps<{
  type: eStatus;
}>();

const status = computed(() => {
  return allStatus.find((i) => i.value === props.type);
});
</script>

<style scoped>
.approveStatus {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;

  width: 70px;
  height: 25px;
  border-radius: 4px;
}
</style>
