<template>
  <div class="flex items-center gap-1">
    <span class="sr-only">Sort by:</span>
    <button
      v-for="option in sortOptions"
      :key="option.value"
      @click="handleClick(option.value)"
      :aria-pressed="sort === option.value"
      :aria-label="sort === option.value ? `Sort by ${option.label}, ${order === 'asc' ? 'ascending' : 'descending'}` : `Sort by ${option.label}`"
      class="text-xs font-medium px-2 py-1 rounded transition-colors"
      :class="sort === option.value
        ? 'text-indigo-600 font-semibold bg-indigo-50'
        : 'text-gray-500 hover:text-gray-900'"
    >
      {{ option.label }}{{ sort === option.value ? (order === 'asc' ? ' ↑' : ' ↓') : '' }}
    </button>
  </div>
</template>

<script setup>
const props = defineProps({
  sort: {
    type: String,
    default: 'date',
  },
  order: {
    type: String,
    default: 'desc',
  },
})

const emit = defineEmits(['change'])

const sortOptions = [
  { value: 'name', label: 'Name' },
  { value: 'date', label: 'Date' },
  { value: 'size', label: 'Size' },
]

function handleClick(value) {
  if (props.sort === value) {
    // Toggle order
    emit('change', { sort: value, order: props.order === 'asc' ? 'desc' : 'asc' })
  } else {
    // Switch to new sort, default desc
    emit('change', { sort: value, order: 'desc' })
  }
}
</script>
