<template>
	<div
		aria-hidden="true"
		class="sticky top-12 z-20 flex h-8 w-full select-none flex-row items-center border-0 border-b border-solid border-bg-raised bg-bg px-3 text-xs font-bold uppercase"
	>
		<div class="min-w-[48px]"></div>
		<button
			class="flex h-full w-full appearance-none items-center gap-1 bg-transparent text-left hover:text-brand"
			@click="$emit('sort', 'name')"
		>
			<span>Name</span>
			<ChevronUpIcon v-if="sortField === 'name' && !sortDesc" class="h-3 w-3" aria-hidden="true" />
			<ChevronDownIcon v-if="sortField === 'name' && sortDesc" class="h-3 w-3" aria-hidden="true" />
		</button>
		<div class="flex shrink-0 gap-4 text-right md:gap-12">
			<button
				class="hidden min-w-[160px] appearance-none items-center justify-start gap-1 bg-transparent hover:text-brand md:flex"
				@click="$emit('sort', 'created')"
			>
				<span>Created</span>
				<ChevronUpIcon
					v-if="sortField === 'created' && !sortDesc"
					class="h-3 w-3"
					aria-hidden="true"
				/>
				<ChevronDownIcon
					v-if="sortField === 'created' && sortDesc"
					class="h-3 w-3"
					aria-hidden="true"
				/>
			</button>
			<button
				class="mr-4 hidden min-w-[160px] appearance-none items-center justify-start gap-1 bg-transparent hover:text-brand md:flex"
				@click="$emit('sort', 'modified')"
			>
				<span>Modified</span>
				<ChevronUpIcon
					v-if="sortField === 'modified' && !sortDesc"
					class="h-3 w-3"
					aria-hidden="true"
				/>
				<ChevronDownIcon
					v-if="sortField === 'modified' && sortDesc"
					class="h-3 w-3"
					aria-hidden="true"
				/>
			</button>
			<div class="min-w-[24px]"></div>
		</div>
	</div>
</template>

<script setup lang="ts">
import ChevronDownIcon from './icons/ChevronDownIcon.vue'
import ChevronUpIcon from './icons/ChevronUpIcon.vue'

defineProps<{
	sortField: string
	sortDesc: boolean
}>()

defineEmits<{
	(e: 'sort', field: string): void
}>()
</script>
