<script setup lang="ts">
/*
 |--------------------------------------------------------------------------
 | Sort Header
 |--------------------------------------------------------------------------
 |
 | Renders a clickable column header for the admin wishlists table.
 | Emits a `sort` event with the column key when the user toggles sorting.
 |
 */
import { ArrowUp, ArrowDown, ArrowUpDown } from 'lucide-vue-next'

defineProps<{
  label: string,
  column: string,
  activeColumn: string,
  activeOrder: 'ASC' | 'DESC',
}>()

defineEmits<{
  (event: 'sort', column: string): void,
}>()
</script>

<template>
  <button
    type="button"
    @click="$emit('sort', column)"
    :aria-sort="activeColumn === column ? activeOrder === 'ASC' ? 'ascending' : 'descending' : 'none'"
    class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-gap-1 stwlite-tw-bg-transparent stwlite-tw-border-0 stwlite-tw-p-0 stwlite-tw-cursor-pointer stwlite-tw-text-xs stwlite-tw-font-medium stwlite-tw-text-gray-500 stwlite-tw-uppercase stwlite-tw-tracking-wider"
  >
    {{ label }}
    <ArrowUp v-if="activeColumn === column && activeOrder === 'ASC'" aria-hidden="true" class="stwlite-tw-w-3 stwlite-tw-h-3" />
    <ArrowDown v-else-if="activeColumn === column && activeOrder === 'DESC'" aria-hidden="true" class="stwlite-tw-w-3 stwlite-tw-h-3" />
    <ArrowUpDown v-else aria-hidden="true" class="stwlite-tw-w-3 stwlite-tw-h-3 stwlite-tw-text-gray-400" />
  </button>
</template>
