<script setup>
defineProps({
  days: { type: Array, required: true },
  view: { type: String, required: true }
});
const emit = defineEmits(["prev", "next", "dayClick"]);
</script>

<template>
  <div class="flex text-center text-xs items-center py-2 min-w-150 sm:min-w-0 bg-muted">
    <div class="w-12.5 lg:w-15 shrink-0 flex items-center justify-center h-full">
      <!-- Spacer for time column alignment -->
    </div>

    <div
      class="flex-1 grid"
      :class="view === 'day' ? 'grid-cols-1' : 'grid-cols-7'"
    >
      <template
        v-for="day in days"
        :key="day.fullDate.toISOString()"
      >
        <div
          class="flex flex-col justify-center items-center font-semibold h-full cursor-pointer group"
          @click="emit('dayClick', day)"
        >
          <slot
            name="day"
            :day="day"
          >
            <div
              class="flex items-center gap-2 py-1 px-2 rounded-xl transition-colors"
              :class="[day.highlight ? 'bg-elevated' : 'group-hover:bg-elevated']"
            >
              <span class="text-xs text-muted tracking-tighter">{{ day.label }}</span>
              <span class="font-bold text-xs text-highlighted">{{ day.date }}</span>
            </div>
          </slot>
        </div>
      </template>
    </div>
  </div>
</template>
