<script setup>
defineProps({
  label: { type: String, required: true },
  field: { type: String, required: true },
  activeField: { type: String, required: true },
  direction: { type: String, required: true },
  align: {
    type: String,
    default: 'left',
    validator: value => ['left', 'right'].includes(value),
  },
})

const emit = defineEmits(['sort'])
</script>

<template>
  <th
    class="px-4 py-4 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
    :class="align === 'right' ? 'text-right' : 'text-left'"
  >
    <button
      type="button"
      class="inline-flex items-center gap-1 transition duration-200 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:hover:text-gray-200"
      :class="[
        align === 'right' ? 'ml-auto' : '',
        activeField === field ? 'text-gray-900 dark:text-white' : '',
      ]"
      @click="emit('sort', field)"
    >
      <span>{{ label }}</span>
      <svg
        v-if="activeField === field"
        class="h-4 w-4"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        aria-hidden="true"
      >
        <path
          v-if="direction === 'asc'"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M5 15l7-7 7 7"
        />
        <path
          v-else
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </button>
  </th>
</template>
