/* Sidebar nav with brand mark + nav items + bookkeeper card at bottom. */

function Sidebar({ active, onNavigate }) {
  const nav = [
    { id: 'dashboard', label: 'Dashboard',    Ico: IconDash },
    { id: 'invoices',  label: 'Invoices',     Ico: IconInvoice, badge: 6 },
    { id: 'jobs',      label: 'Jobs',         Ico: IconJobs },
    { id: 'expenses',  label: 'Expenses',     Ico: IconExpenses },
    { id: 'clients',   label: 'Clients',      Ico: IconClients },
    { id: 'reports',   label: 'Reports',      Ico: IconReports },
  ];
  const second = [
    { id: 'tax',       label: 'Tax center',   Ico: IconTax },
    { id: 'documents', label: 'Documents',    Ico: IconDocuments, badge: 'New' },
    { id: 'settings',  label: 'Settings',     Ico: IconSettings },
  ];

  const Item = ({ item }) => {
    const on = active === item.id;
    return (
      <button type="button" className="cb-nav-item" data-on={on ? '1' : '0'}
              onClick={() => onNavigate(item.id)}>
        <item.Ico size={17} />
        <span>{item.label}</span>
        {item.badge != null && (
          <em className={typeof item.badge === 'number' ? 'cb-nav-count' : 'cb-nav-pill'}>
            {item.badge}
          </em>
        )}
      </button>
    );
  };

  return (
    <aside className="cb-sidebar">
      <header className="cb-brand">
        <span className="cb-brand-mark"><IconLogo size={22} /></span>
        <span className="cb-brand-name">
          contractor<i>books</i>
        </span>
      </header>

      <nav className="cb-nav">
        <div className="cb-nav-section">
          {nav.map((it) => <Item key={it.id} item={it} />)}
        </div>
        <div className="cb-nav-section">
          <div className="cb-nav-label">Finance</div>
          {second.map((it) => <Item key={it.id} item={it} />)}
        </div>
      </nav>

      <footer className="cb-bk">
        <div className="cb-bk-avatar">DR</div>
        <div className="cb-bk-body">
          <div className="cb-bk-name">Dana Reyes</div>
          <div className="cb-bk-role">Your bookkeeper</div>
        </div>
        <button type="button" className="cb-bk-msg" aria-label="Message Dana">
          <IconSend size={14} />
        </button>
      </footer>
    </aside>
  );
}

Object.assign(window, { Sidebar });