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

interface Props {
  timeline: timelineEntry[];
}

const { timeline = [] } = Astro.props;
---

<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
          .sort((a: timelineEntry, b: timelineEntry) =>
            a.date.diff(b.date).toMillis(),
          )
          .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.toFormat("LLLL kkkk")}
              </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>