---
import type { timelineEntry } from "@interfaces/timeline.ts";

const timeline: timelineEntry[] = Astro.props.timeline || [];
---

<custom-timeline>
  <div class="flex w-full flex-col">
    <div
      class="3xl:grid-cols-6 z-10 grid max-w-full grid-flow-row gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
      data-timeline
    >
      {
        timeline.map((entry, index) => (
          <div
            class="border-caperren-green min-w-s max-w-s rounded-lg border bg-black px-2 pt-1 pb-2"
            data-timeline-node-index={index}
          >
            <h3 class="text-lg font-bold">{entry.event}</h3>
            <h4 class="leading-none font-semibold">{entry.eventDetail}</h4>
            <time class="mt-1 mb-2 text-sm leading-none italic">
              {entry.date}
            </time>
            {entry.description && (
              <p class="text-sm font-normal">{entry.description}</p>
            )}
          </div>
        ))
      }
    </div>
    <div
      class="z-0 w-full max-w-full overflow-x-visible"
      data-custom-timeline-line-wrapper
    >
    </div>
  </div>
</custom-timeline>

<script src="./timeline.ts"></script>