<template>
  <div class="flex h-12 items-center justify-between border-b border-m-primary/20 px-2">
    <button
      type="button"
      data-test="header-prev"
      class="rounded p-2 hover:bg-m-primary/10"
      :aria-label="viewMode === 'days' ? 'Mois précédent' : 'Année précédente'"
      @click="emit('prev')"
    >
      <Icon
        icon="mdi:chevron-left"
        :width="20"
        :height="20"
      />
    </button>

    <button
      type="button"
      data-test="header-toggle"
      class="flex items-center gap-1 rounded px-2 py-1 text-base font-medium hover:bg-m-primary/10"
      @click="emit('toggle-view')"
    >
      {{ label }}
      <Icon
        icon="mdi:chevron-down"
        :width="16"
        :height="16"
      />
    </button>

    <button
      type="button"
      data-test="header-next"
      class="rounded p-2 hover:bg-m-primary/10"
      :aria-label="viewMode === 'days' ? 'Mois suivant' : 'Année suivante'"
      @click="emit('next')"
    >
      <Icon
        icon="mdi:chevron-right"
        :width="20"
        :height="20"
      />
    </button>
  </div>
</template>

<script setup lang="ts">
import {computed} from 'vue'
import {Icon} from '@iconify/vue'

defineOptions({name: 'MalioDateCalendarHeader'})

const props = defineProps<{
  viewMode: 'days' | 'months'
  currentMonth: number
  currentYear: number
}>()

const emit = defineEmits<{
  (e: 'prev' | 'next' | 'toggle-view'): void
}>()

const monthsLong = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
  'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']

const label = computed(() => {
  const name = monthsLong[props.currentMonth]
  return `${name.charAt(0).toUpperCase()}${name.slice(1)} ${props.currentYear}`
})
</script>
