/* global React, Crumbs */
/* ============================================================================
   sections/travel.jsx — the "travel.md" section.
   ----------------------------------------------------------------------------
   Places lived in / visited (data.travel), rendered as a code-block list.
   ============================================================================ */
function ViewTravel({ data }) {
  return (
    <>
      <Crumbs parts={["~", "portfolio", "travel.md"]} />
      <h1 className="rm-h1"><span className="hash">#</span>Travel</h1>
      <div className="rm-prose">
        <p style={{ color: "var(--muted)" }}>
          Places I've spent enough time in to remember them properly.
        </p>
        <div className="rm-block">
          {data.travel.map((t) => (
            <div key={t.place}>
              <span className="lbl">{t.country}</span>
              <span className="kw">{t.place.padEnd(16, " ")}</span>
              <span className="cm"># {t.year}</span>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

Object.assign(window, { ViewTravel });