<template>
  <div class="cell" :class="cellClasses" :data-date="day.date">
    <h1>{{ day.displayText }}</h1>
    <span v-if="day.lunarPhase" class="lunar-phase">{{ day.lunarPhase }}</span>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  day: {
    type: Object,
    required: true
  }
})

const cellClasses = computed(() => {
  return {
    [props.day.monthClass]: true,
    today: props.day.isToday,
    selected: props.day.isSelected,
    weekend: props.day.isWeekend,
    firstday: props.day.isFirstDay
  }
})
</script>
