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

const emit = defineEmits(['select', 'shift-month', 'shift-year'])
</script>

<template>
  <section class="border border-stone-200 bg-white/80 p-5">
    <div class="mb-4 flex items-start justify-between gap-4">
      <div>
        <h2 class="text-[11px] font-bold tracking-[0.22em] text-ink">CALENDAR</h2>
        <div class="mt-2 space-y-1">
          <p class="text-base font-semibold tracking-[-0.04em] text-stone-900">{{ monthLabel }}</p>
          <p class="text-[11px] font-semibold tracking-[0.16em] text-stone-500">{{ yearLabel }}</p>
        </div>
      </div>
      <div class="flex flex-col gap-2">
        <div class="flex items-center gap-2">
          <button
            type="button"
            class="rounded-full border border-stone-200 px-3 py-1 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
            @click="emit('shift-year', -1)"
          >
            -1Y
          </button>
          <button
            type="button"
            class="rounded-full border border-stone-200 px-3 py-1 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
            @click="emit('shift-year', 1)"
          >
            +1Y
          </button>
        </div>
        <div class="flex items-center gap-2">
          <button
            type="button"
            class="rounded-full border border-stone-200 px-3 py-1 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
            @click="emit('shift-month', -1)"
          >
            PREV
          </button>
          <button
            type="button"
            class="rounded-full border border-stone-200 px-3 py-1 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
            @click="emit('shift-month', 1)"
          >
            NEXT
          </button>
        </div>
      </div>
    </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)"
      >
        <span class="relative flex h-full w-full items-center justify-center">
          <span>{{ day.label }}</span>
          <span
            v-if="markedKeys.includes(day.key)"
            class="absolute bottom-[3px] h-[5px] w-[5px] rounded-full bg-red-500"
          />
        </span>
      </button>
    </div>
  </section>
</template>
