<template>
  <div
    data-test="month-picker"
    class="grid grid-cols-4 gap-2 p-3"
  >
    <button
      v-for="(name, index) in monthsShort"
      :key="name"
      type="button"
      data-test="month"
      :data-month="index"
      class="rounded py-3 text-sm transition-colors duration-100"
      :class="index === selectedMonth
        ? 'bg-m-primary text-white'
        : 'text-black hover:bg-m-primary/10'"
      @click="emit('select', index)"
    >
      {{ name }}
    </button>
  </div>
</template>

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

defineProps<{selectedMonth?: number}>()

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

const monthsShort = ['Janv', 'Févr', 'Mars', 'Avr', 'Mai', 'Juin',
  'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc']
</script>
