// Shell components: Sidebar + Topbar

const Sidebar = ({ active, onNav }) => {
  const items = [
    { id: "resumen",     label: "Resumen",      icon: Icons.Layout },
    { id: "cobros",      label: "Cobros",       icon: Icons.Coin },
    { id: "clientes",    label: "Clientes",     icon: Icons.Users },
    { id: "facturacion", label: "Facturación",  icon: Icons.Doc },
    { id: "reservas",    label: "Reservas",     icon: Icons.Calendar },
    { id: "reportes",    label: "Reportes",     icon: Icons.Trend },
  ];
  return (
    <aside className="sb">
      <div className="sb-brand">
        <img src="../../assets/melvy-isotype.svg" alt=""/>
        <b>melvy</b>
      </div>

      <div className="sb-section">Principal</div>
      {items.map(it => (
        <div key={it.id}
             className={`sb-item ${active === it.id ? "active" : ""}`}
             onClick={() => onNav(it.id)}>
          {it.icon}{it.label}
        </div>
      ))}

      <div className="sb-section">Cuenta</div>
      <div className={`sb-item ${active === "config" ? "active" : ""}`}
           onClick={() => onNav("config")}>
        {Icons.Cog}Configuración
      </div>

      <div className="sb-spacer"/>

      <div className="sb-account">
        <Avatar name="Fernando Casas" size={32}/>
        <div className="who">
          <b>Fernando Casas</b>
          <span>Academia Hortaleza</span>
        </div>
      </div>
    </aside>
  );
};

const Topbar = ({ title, crumbs }) => (
  <header className="tb">
    <div>
      {crumbs && <div className="crumbs">{crumbs}</div>}
      <h2>{title}</h2>
    </div>
    <div className="spacer"/>
    <div className="search">
      {Icons.Search}
      <input placeholder="Buscar clientes, cobros…"/>
      <kbd>⌘K</kbd>
    </div>
    <button className="icon-btn" title="Notificaciones">
      {Icons.Bell}
      <span className="pip"/>
    </button>
  </header>
);

Object.assign(window, { Sidebar, Topbar });