<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"
      class="flex h-[45px] w-full items-center justify-center"
      @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'
          : 'text-black hover:bg-m-primary/10'"
      >
        {{ name }}
      </span>
    </button>
  </div>
</template>

<script setup lang="ts">
defineOptions({name: 'MalioDateMonthPicker'})

defineProps<{selectedMonth?: number}>()

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>
