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

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

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

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