<template>
  <div class="flex h-[36px] justify-between border-b border-black/60 mb-3">
    <button
      type="button"
      data-test="header-prev"
      class="ml-2 flex self-start rounded"
      :aria-label="viewMode === 'days' ? 'Mois précédent' : 'Année précédente'"
      @click="emit('prev')"
    >
      <Icon
        icon="mdi:chevron-left"
        :width="25"
        :height="25"
      />
    </button>

    <button
      type="button"
      data-test="header-toggle"
      class="flex gap-1 rounded text-base font-medium"
      @click="emit('toggle-view')"
    >
      <span class="mt-[2px]">{{ label }}</span>
      <Icon
        icon="mdi:chevron-down"
        :width="25"
        :height="25"
      />
    </button>

    <button
      type="button"
      data-test="header-next"
      class="mr-2 flex self-start rounded"
      :aria-label="viewMode === 'days' ? 'Mois suivant' : 'Année suivante'"
      @click="emit('next')"
    >
      <Icon
        icon="mdi:chevron-right"
        :width="25"
        :height="25"
      />
    </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>
