<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 {
  eStatusOfCopyright,
  allStatusOfCopyright,
  allStatusOfCert,
  eStatusOfFilerCertification,
} from "./status";

const props = withDefaults(
  defineProps<{
    type: eStatusOfCopyright | eStatusOfFilerCertification;
    mode?: "copyright" | "filingPerson";
  }>(),
  {
    mode: "copyright",
  }
);

const status = computed(() => {
  if (props.mode === "copyright")
    return allStatusOfCopyright.find((i) => i.value === props.type);
  else return allStatusOfCert.find((i) => i.value === props.type);
});
</script>

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

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