/*
 * ShipmentEvent — single timeline event in the shipment detail.
 * Plays the "message bubble" role: an addressable record posted by an actor
 * (system, despachador, customs officer, driver), with timestamp and optional attachment.
 */
const ShipmentEvent = ({ event }) => {
  const isSystem = event.actor === "system";
  return (
    <li className={"tm-event " + (isSystem ? "is-system" : "is-human")}>
      <div className="tm-event__gutter" aria-hidden="true">
        <span className={"tm-event__dot " + (event.tone ? "tone-" + event.tone : "")}></span>
        <span className="tm-event__line"></span>
      </div>
      <div className="tm-event__body">
        <header className="tm-event__head">
          <span className="tm-event__author">{event.author}</span>
          <span className="tm-event__role tx-caption">{event.role}</span>
          <span className="tm-event__time tx-mono">{event.time}</span>
        </header>
        <div className="tm-event__text">{event.text}</div>
        {event.attachment && (
          <div className="tm-event__attach">
            <span aria-hidden="true">▤</span>
            <span className="tx-body-sm">{event.attachment}</span>
            <button className="btn btn-ghost" style={{ height: 28, padding: "0 10px", marginLeft: "auto" }}>
              Descargar
            </button>
          </div>
        )}
      </div>
    </li>
  );
};
window.ShipmentEvent = ShipmentEvent;
globalThis.ShipmentEvent = ShipmentEvent;