<template>
  <div
    data-test="month-picker"
    class="grid grid-cols-3 gap-3"
  >
    <button
      v-for="(name, index) in months"
      :key="name"
      type="button"
      data-test="month"
      :data-month="index"
      :disabled="!isMonthInRange(currentYear, index, min, max)"
      :aria-disabled="!isMonthInRange(currentYear, index, min, max)"
      class="flex h-[45px] w-full items-center justify-center"
      :class="isMonthInRange(currentYear, index, min, max) ? 'cursor-pointer' : 'cursor-not-allowed'"
      @click="emit('select', index)"
    >
      <span
        class="flex h-[30px] w-full items-center justify-center rounded text-sm transition-colors duration-100"
        :class="index === selectedMonth
          ? 'bg-m-primary text-white'
          : isMonthInRange(currentYear, index, min, max)
            ? 'text-black hover:bg-m-primary/10'
            : 'text-m-muted/30'"
      >
        {{ name }}
      </span>
    </button>
  </div>
</template>

<script setup lang="ts">
import {isMonthInRange} from '../composables/dateFormat'

defineOptions({name: 'MalioDateMonthPicker'})

defineProps<{
  currentYear: number
  selectedMonth?: number
  min?: string
  max?: string
}>()

const emit = defineEmits<{(e: 'select', month: number): void}>()

const months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
  'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
</script>
