<script setup>
import { useCalendarSlotHeight } from "../../../composables/useCalendarSlotHeight";
import { useNuxtCalendarConfig } from "../../../composables/useNuxtCalendarConfig";
import { formatTime } from "../../../utils";
const { hourHeightPx } = useCalendarSlotHeight();
const config = useNuxtCalendarConfig();
defineProps({
  hours: { type: Array, required: true }
});
function formatHour(hour) {
  const timeString = `${String(hour).padStart(2, "0")}:00`;
  return formatTime(timeString, config.timeFormat);
}
</script>

<template>
  <div class="">
    <div
      v-for="(hour, hourKey) in hours"
      :key="hourKey"
      class="text-right pr-2 text-xs border-r border-default flex items-start justify-end pt-1"
      :style="{ height: hourHeightPx }"
    >
      <slot
        name="time"
        :hour="hour"
        :formatted-hour="formatHour(hour)"
      >
        <span :class="[hourKey === 0 ? 'text-dimmed' : '-translate-y-1/2 text-dimmed']">{{ formatHour(hour) }}</span>
      </slot>
    </div>
  </div>
</template>
