<script lang="ts">
  import { createEventDispatcher } from 'svelte'

  interface Props {
    col: string
    label: string
    sortCol: string
    sortDesc: boolean
    align?: 'left' | 'right'
    class?: string
  }

  let { col, label, sortCol, sortDesc, align = 'right', class: cls = '' }: Props = $props()
  const dispatch = createEventDispatcher<{ sort: string }>()
</script>

<th
  class="cursor-pointer select-none whitespace-nowrap px-3 py-2 {align === 'left' ? 'text-left' : 'text-right'} text-xs font-medium text-gray-400 uppercase tracking-wider hover:text-gray-200 {cls}"
  onclick={() => dispatch('sort', col)}
>
  {label}
  {#if sortCol === col}
    <span class="ml-1 text-yellow-400">{sortDesc ? '▼' : '▲'}</span>
  {/if}
</th>
