/* sidebar.jsx — VER Clipping navigation */

const Sidebar = ({ page, onNavigate, pendingCount }) => {
  const items = [
    { key: "dashboard", label: "Dashboard",       icon: "dashboard" },
    { key: "review",    label: "Revisão do dia",   icon: "review", badge: pendingCount },
    { key: "clients",   label: "Clientes",         icon: "clients" },
    { key: "portals",   label: "Portais",          icon: "portals" },
    { key: "history",   label: "Histórico",        icon: "history" },
    { key: "metrics",   label: "Métricas",         icon: "metrics" },
  ];
  return (
    <aside className="sb">
      <div className="sb__brand">
        <div className="sb__mark">VER</div>
        <div className="sb__name">
          VER Clipping
          <small>Assessoria · Santos/SP</small>
        </div>
      </div>

      <div className="sb__section">Operação diária</div>
      <nav className="sb__nav">
        {items.map(it => (
          <button key={it.key} className={"sb__item" + (page === it.key ? " is-active" : "")} onClick={() => onNavigate(it.key)}>
            <Icon name={it.icon} />
            <span>{it.label}</span>
            {it.badge ? <span className="sb__badge">{it.badge}</span> : null}
          </button>
        ))}
      </nav>

      <div className="sb__footer">
        <div className="sb__avatar">MR</div>
        <div>
          <strong>Marina R.</strong>
          <span>Editora · VER MKT</span>
        </div>
      </div>
    </aside>
  );
};

window.Sidebar = Sidebar;