<template>
  <div class="flex items-center justify-between bg-gray-50 rounded-lg px-4 py-3">
    <!-- Previous Week Button -->
    <button
      @click="emit('prev')"
      :disabled="selectedWeek <= 1"
      class="flex items-center gap-1 px-3 py-2 text-gray-700 hover:bg-gray-200 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
    >
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
      </svg>
      <span class="hidden sm:inline">Prev</span>
    </button>

    <!-- Week Display -->
    <div class="flex items-center gap-3">
      <div class="text-center">
        <div class="text-lg font-bold text-gray-900">
          Week {{ selectedWeek }}
        </div>
        <div class="text-sm text-gray-500">
          Season {{ selectedSeason }}
        </div>
      </div>

      <!-- Current Week Button -->
      <button
        v-if="!isCurrentWeek"
        @click="emit('goToCurrent')"
        class="px-3 py-1.5 text-sm bg-primary text-white rounded-lg hover:bg-blue-700 transition"
      >
        Current Week
      </button>
      <span
        v-else
        class="px-3 py-1.5 text-sm bg-green-100 text-green-800 rounded-lg font-medium"
      >
        Current
      </span>
    </div>

    <!-- Next Week Button -->
    <button
      @click="emit('next')"
      class="flex items-center gap-1 px-3 py-2 text-gray-700 hover:bg-gray-200 rounded-lg transition"
    >
      <span class="hidden sm:inline">Next</span>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
      </svg>
    </button>
  </div>
</template>

<script setup lang="ts">
interface Props {
  selectedSeason: number
  selectedWeek: number
  isCurrentWeek: boolean
}

defineProps<Props>()

const emit = defineEmits<{
  prev: []
  next: []
  goToCurrent: []
}>()
</script>
