import React from "react";

const tabs = ["Dashboard", "Products", "Orders", "Customers", "Reports"];

export default function Sidebar({ activeTab, setActiveTab, onLogout }) {
  return (
    <aside className="sidebar">
      <div className="brand">CIMS</div>
      <div className="menu">
        {tabs.map((t) => (
          <button
            key={t}
            className={activeTab === t ? "active menu-btn" : "menu-btn"}
            onClick={() => setActiveTab(t)}
            type="button"
          >
            <span className="icon">
              {t === "Dashboard"
                ? ""
                : t === "Products"
                  ? ""
                  : t === "Orders"
                    ? ""
                    : t === "Customers"
                      ? ""
                      : ""}
            </span>
            {t}
          </button>
        ))}
      </div>
      <button className="ghost logout-btn" onClick={onLogout} type="button">
        Logout
      </button>
    </aside>
  );
}

