<template>
  <v-chip :color="badgeColor" small>
    {{ salesProcessLevel || 'No Status' }}
  </v-chip>
</template>

<script lang="ts" setup>
import { defineProps, computed } from "vue";

type InterestSalesProcessLevel =
  | "General Qualified Interest"
  | "Specific Qualified Interest"
  | "LOI and NDA Sent"
  | "Signed LOI and NDA"
  | "Made Reservation"
  | "Contract Negotiation"
  | "Contract Negotiations Finalized"
  | "Contract Signed";

const props = defineProps<{
  salesProcessLevel: InterestSalesProcessLevel | null | undefined;
}>();

const colorMapping: Record<InterestSalesProcessLevel, string> = {
  "General Qualified Interest": "blue",
  "Specific Qualified Interest": "green",
  "LOI and NDA Sent": "orange",
  "Signed LOI and NDA": "purple",
  "Made Reservation": "pink",
  "Contract Negotiation": "brown",
  "Contract Negotiations Finalized": "teal",
  "Contract Signed": "indigo",
};

const badgeColor = computed(() => {
  if (!props.salesProcessLevel) return "grey";
  return colorMapping[props.salesProcessLevel as InterestSalesProcessLevel] || "grey";
});
</script>

<style scoped>
.v-chip {
  font-size: 0.8rem;
}
</style>
