<script setup lang="ts">
import { SortDirection } from './sort';

interface Props {
    currentSortKey: string | null;
    sortDirection?: SortDirection | null;
    sortKey: string;
}
interface Emit {
    (e: 'sort', key: string, direction: SortDirection): void;
}

defineProps<Props>();
const emit = defineEmits<Emit>();

</script>

<template>
    <th>
        <span class="asc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'asc')}" @click="emit('sort', sortKey, 'asc')">▲</span>
        <slot />
        <span class="desc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'desc')}" @click="emit('sort', sortKey, 'desc')">▼</span>
    </th>
</template>

<style scoped>
th {
    @apply relative h-8;
}
span.asc, span.desc {
    @apply absolute end-2 cursor-pointer text-xs;
}
span.asc {
    @apply top-0.5;
}
span.desc {
    @apply bottom-0.5;
}
</style>
