---
import Widget from "./Widget.astro";
import { timeline, type TimelineType } from "@/data/timeline";

const isDate = (d: string) => /^\d{4}/.test(d);

const typeLabel: Record<TimelineType, string> = {
  career: "career",
  education: "education",
  cert: "cert",
  project: "project",
  homelab: "homelab",
};
---

<Widget title="Journey">
  <ol class="flex flex-col gap-0">
    {timeline.map((entry) => (
      <li class="pb-2lh last:pb-0">
        <p class="text-[var(--color-text-dim)] mb-qtr-lh">
          {isDate(entry.date)
            ? <time datetime={entry.date}>{entry.date}</time>
            : <span>{entry.date}</span>
          }
          <span class="mx-[0.5ch]">·</span>
          <em>{typeLabel[entry.type]}</em>
        </p>

        <h3 class="font-semibold mb-half-lh">{entry.title}</h3>

        <p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
          {entry.description}
        </p>

        {entry.tags && entry.tags.length > 0 && (
          <p class="text-[var(--color-text-dim)]">
            {entry.tags.join(" · ")}
          </p>
        )}
      </li>
    ))}
  </ol>
</Widget>