import { NavLink } from "react-router-dom";
import { Globe2, Activity, Scale } from "lucide-react";
import "./Sidebar.css";
import LogoMark from "./LogoMark.jsx";

export const NAV_ITEMS = [
  { to: "/map",      label: "World Map",          short: "Map",       Icon: Globe2,   ord: "01" },
  { to: "/timeline", label: "Timeline",           short: "Timeline",  Icon: Activity, ord: "02" },
  { to: "/groups",   label: "Contrasting Groups", short: "Spectrum",  Icon: Scale,    ord: "03" },
];

export default function Sidebar({ onNavigate }) {
  return (
    <nav className="sidebar" aria-label="Primary">
      <div className="sidebar__brand">
        <div className="sidebar__mark">
          <LogoMark className="sidebar__logo" />
        </div>
        <div className="sidebar__wordmark">
          <div className="sidebar__name">FrameVis</div>
          <div className="sidebar__tag">media framing intelligence</div>
        </div>
      </div>

      <div className="sidebar__section-label">Views</div>
      <ul className="sidebar__nav">
        {NAV_ITEMS.map(({ to, label, Icon, ord }) => (
          <li key={to}>
            <NavLink to={to} className="sidebar__link" onClick={onNavigate}>
              {({ isActive }) => (
                <>
                  <span className="sidebar__ord">{ord}</span>
                  <Icon size={16} strokeWidth={1.5} />
                  <span className="sidebar__label">{label}</span>
                  {isActive && <span className="sidebar__active-bar" />}
                </>
              )}
            </NavLink>
          </li>
        ))}
      </ul>

      <div className="sidebar__footer">
        <div className="label">Status</div>
        <div className="sidebar__status">
          <span className="sidebar__dot" />
          API
        </div>
        <div className="sidebar__build">build 0.1.0 · prototype</div>
      </div>
    </nav>
  );
}