// Left navigation panel.

const NAV_ITEMS = [
  { id: "about",      label: "Connor Tan",  icon: I.user },
  { id: "experience", label: "Experience",  icon: I.gem  },
  { id: "projects",   label: "Projects",    icon: I.code },
  { id: "resume",     label: "Resume",      icon: I.scroll },
  { id: "contact",    label: "Contact",     icon: I.mail },
];

// UW CS Webring — must match the URL added to
// https://github.com/JusGu/uwatering's webringData[].
const WEBRING_SITE = "https://connor-tan.me";
const Webring = () => (
  <div className="webring" title="UW CS Webring">
    <a href={`https://cs.uwatering.com/#${WEBRING_SITE}?nav=prev`} aria-label="Previous site" className="wr-arrow">←</a>
    <a href={`https://cs.uwatering.com/#${WEBRING_SITE}`} target="_blank" rel="noreferrer" aria-label="CS Webring">
      <img src="https://cs.uwatering.com/icon.white.svg" alt="CS Webring" className="wr-icon" />
    </a>
    <a href={`https://cs.uwatering.com/#${WEBRING_SITE}?nav=next`} aria-label="Next site" className="wr-arrow">→</a>
  </div>
);

const LeftNav = ({ active, onChange }) => (
  <div className="leftnav">
    <div className="navlist">
      {NAV_ITEMS.map(({ id, label, icon: Icn }) => (
        <div
          key={id}
          className={`navitem ${active === id ? "active" : ""}`}
          onClick={() => onChange(id)}
        >
          <Icn className="nico" />
          <span>{label}</span>
        </div>
      ))}
    </div>
    <div className="footer">
      <Webring />
      <div className="pn disabled" aria-disabled="true">Patch Notes</div>
      <div className="ver">v 26.04</div>
    </div>
  </div>
);

window.LeftNav = LeftNav;
window.Webring = Webring;
window.NAV_ITEMS = NAV_ITEMS;