<script setup>
defineProps({
  monthLabel: {
    type: String,
    required: true,
  },
  days: {
    type: Array,
    required: true,
  },
  selectedKey: {
    type: String,
    required: true,
  },
})

const emit = defineEmits(['select'])
</script>

<template>
  <section class="border border-stone-200 bg-white/80 p-5">
    <div class="mb-4 flex items-center justify-between">
      <h2 class="text-[11px] font-bold tracking-[0.22em] text-ink">CALENDAR</h2>
      <span class="text-[11px] font-semibold tracking-[0.16em] text-stone-500">{{ monthLabel }}</span>
    </div>
    <div class="mb-3 grid grid-cols-7 gap-2 text-center text-[10px] font-bold tracking-[0.12em] text-stone-400">
      <span v-for="weekday in ['S', 'M', 'T', 'W', 'T', 'F', 'S']" :key="weekday">{{ weekday }}</span>
    </div>
    <div class="grid grid-cols-7 gap-2">
      <button
        v-for="day in days"
        :key="day.key"
        type="button"
        class="aspect-square rounded-full border text-[11px] font-semibold transition"
        :class="[
          day.key === selectedKey
            ? 'border-ink bg-ink text-white'
            : 'border-stone-200 bg-stone-50 text-stone-700 hover:border-stone-400 hover:bg-white',
          day.isCurrentMonth ? '' : 'opacity-35',
        ]"
        @click="emit('select', day.date)"
      >
        {{ day.label }}
      </button>
    </div>
  </section>
</template>
