import type { TimelineBlockValue } from "@/types/wagtail";

export default function Timeline({ value }: { value: TimelineBlockValue }) {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-4xl px-6">
        {value.heading && (
          <h2 className="mb-16 text-4xl font-bold text-slate-900">{value.heading}</h2>
        )}
        <ol className="relative space-y-10 border-l border-slate-200 pl-8">
          {value.items?.map((item, index) => (
            <li key={`${item.year}-${index}`} className="relative">
              <span className="absolute -left-[2.35rem] top-1 h-3 w-3 rounded-full bg-primary" />
              <div className="mb-1 text-lg font-semibold text-primary">
                {item.year}
              </div>
              <p className="text-slate-600">{item.event}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}