import type { DisplayItem } from "@/lib/track";

export function Timeline({ items }: { items: DisplayItem[] }) {
  return (
    <ol className="track">
      {items.map((item) => (
        <li key={item.key} className={`step ${item.state}`} aria-current={item.state === "current" || item.state === "side-current" ? "step" : undefined}>
          <span className="dot" />
          <strong>
            {item.title}
            {item.badge ? <span className="badge">{item.badge}</span> : null}
          </strong>
          <ul className="moments">
            {item.moments.map((moment, index) => (
              <li key={`${item.key}-${index}`}>
                {moment.time ? <time>{moment.time}</time> : null}
                {moment.text ? <p>{moment.text}</p> : null}
              </li>
            ))}
          </ul>
        </li>
      ))}
    </ol>
  );
}