const css = `
.m-tl{display:grid;font-family:var(--mono)}
.m-tl-item{display:flex;gap:12px;align-items:baseline;padding:5px 0 5px 14px;font-size:12px;border-left:2px solid var(--line);position:relative;color:var(--ink)}
.m-tl-item::before{content:'';position:absolute;left:-4px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--m-tl-c,var(--muted))}
.m-tl-time{flex:none;color:var(--faint);font-size:11px;min-width:130px}
.m-tl-text{color:var(--ink)}
.m-tl-who{color:var(--muted);font-size:11px}
`;
function ensureCss() {
  if (typeof document === 'undefined' || document.getElementById('m-tl-css')) return;
  const s = document.createElement('style'); s.id = 'm-tl-css'; s.textContent = css;
  document.head.appendChild(s);
}

export function Timeline({ items = [], style }) {
  ensureCss();
  return (
    <div className="m-tl" style={style}>
      {items.map((it, i) => (
        <div key={i} className="m-tl-item" style={it.color ? { '--m-tl-c': it.color } : null}>
          <span className="m-tl-time">{it.time}</span>
          <span className="m-tl-text">{it.text}</span>
          {it.who ? <span className="m-tl-who">{it.who}</span> : null}
        </div>
      ))}
    </div>
  );
}