<script lang="ts">
  import ArrowUpIcon from '@lucide/svelte/icons/arrow-up'
  import ArrowDownIcon from '@lucide/svelte/icons/arrow-down'
  import ArrowUpDownIcon from '@lucide/svelte/icons/arrow-up-down'

  let {
    label,
    sorted = false,
    direction = 'asc',
    onclick
  }: {
    label: string
    sorted?: boolean
    direction?: 'asc' | 'desc'
    onclick?: () => void
  } = $props()
</script>

<button type="button" class="flex items-center gap-1 hover:text-foreground" {onclick}>
  {label}
  {#if sorted}
    {#if direction === 'asc'}
      <ArrowUpIcon class="size-3" />
    {:else}
      <ArrowDownIcon class="size-3" />
    {/if}
  {:else}
    <ArrowUpDownIcon class="size-3 text-muted-foreground/50" />
  {/if}
</button>
