<template>
  <i :class="['bi', genderClass]"></i>
</template>

<script setup lang="ts">
import { computed } from "vue";
import type { Gender } from "ChillMainAssets/types";
import { toGenderTranslation } from "ChillMainAssets/lib/api/genderHelper";

interface GenderIconRenderBoxProps {
  gender: Gender;
}

const props = defineProps<GenderIconRenderBoxProps>();

const genderClass = computed<string>(() => {
  switch (toGenderTranslation(props.gender)) {
    case "female":
      return "bi-gender-female";
    case "male":
      return "bi-gender-male";
    case "neutral":
    case "unknown":
    default:
      return "bi-gender-neuter";
  }
});
</script>
