<template>
  <span>
    <!-- eslint-disable vue/no-v-html -->
    <span v-html="props.label"></span>

    <span
      v-if="isAsc() || isDesc()"
      class="text-black-50"
    >
      <i
        v-if="isAsc()"
        class="ms-1 fa-solid fa-sort-up"
      ></i>
      <i
        v-if="isDesc()"
        class="ms-1 fa-solid fa-sort-down"
      ></i>
    </span>
  </span>
</template>

<script setup>
const props = defineProps({
  currentOrder: {
    type: [String, null],
    required: true,
  },
  currentSort: {
    type: [String, null],
    required: true,
  },
  order: {
    type: [String, null],
    required: true,
  },
  sort: {
    type: [String, null],
    required: true,
  },
  label: {
    type: [String, null],
    required: true,
  },
})

const isActive = () => {
  return props.currentOrder === props.order
}

const isAsc = () => {
  return isActive() && props.currentSort === 'asc'
}

const isDesc = () => {
  return isActive() && props.currentSort === 'desc'
}
</script>
