"use client";

import { useEffect } from "react";
import Reveal from "@/components/ui/Reveal";
import { timeline as sample } from "@/data/explore";
import { useAboutData } from "@/store/explore";

export default function Timeline() {
  const { item, status, load } = useAboutData();
  useEffect(() => {
    if (status === "idle") void load(0);
  }, [status, load]);

  // Key dates from the API when it answers; the static list otherwise.
  const timeline = item && item.events.length > 0 ? item.events.map((e) => ({ when: e.year, title: e.title, text: e.body })) : sample;

  return (
    <div className="tl-wrap">
      <h3 className="tl-title">Key dates</h3>
      <ol className="timeline">
        {timeline.map((t, i) => (
          <Reveal as="li" key={t.when + t.title} delay={(i % 3) * 0.05} className="tl-item">
            <span className="tl-when">{t.when}</span>
            <strong>{t.title}</strong>
            <p>{t.text}</p>
          </Reveal>
        ))}
      </ol>
    </div>
  );
}