<script setup lang="ts">
defineProps<{
  isActive: boolean;
  isLoading: boolean;
  isLoaded: boolean;
  pulseScale: number;
}>();
</script>

<template>
  <section
    class="calendar-lab-rect calendar-lab-day"
    :class="isActive ? 'calendar-lab-rect-active' : ''"
    :style="{ transform: `scale(${pulseScale})` }"
  >
    <header class="calendar-lab-header">
      <p class="calendar-lab-title">Day</p>
      <p class="calendar-lab-subtitle">Timeline events</p>
    </header>

    <p v-if="isLoading" class="calendar-lab-loading">Loading GraphQL day payload…</p>
    <p v-else-if="isLoaded" class="calendar-lab-meta">Data ready</p>

    <div class="calendar-lab-timeline">
      <article class="calendar-lab-event">
        <span>09:30</span>
        <p>Call with client</p>
      </article>
      <article class="calendar-lab-event">
        <span>13:00</span>
        <p>Prepare follow-up summary</p>
      </article>
      <article class="calendar-lab-event">
        <span>16:45</span>
        <p>Send proposal update</p>
      </article>
    </div>
  </section>
</template>
