import { useState } from "react";
import { Dashboard } from "./components/Dashboard";
import { Inventory } from "./components/Inventory";
import { ProtocolChecker } from "./components/ProtocolChecker";
import { 
  LayoutDashboard, 
  Package, 
  FileCheck
} from "lucide-react";
const logo = "/logo.png";

type Tab = "dashboard" | "inventory" | "protocol";

export default function App() {
  const [activeTab, setActiveTab] = useState<Tab>("dashboard");

  const navItems = [
    { id: "dashboard" as Tab, label: "Dashboard", icon: LayoutDashboard },
    { id: "inventory" as Tab, label: "Inventory", icon: Package },
    { id: "protocol" as Tab, label: "Protocol Checker", icon: FileCheck },
  ];

  return (
    <div className="flex h-screen bg-secondary">
      {/* Sidebar */}
      <aside className="w-64 bg-card border-r border-border flex flex-col">
        <div className="p-6 border-b border-border flex items-center justify-center">
          <img src={logo} alt="labwise" className="h-10" />
        </div>
        
        <nav className="flex-1 p-4">
          {navItems.map((item) => {
            const Icon = item.icon;
            return (
              <button
                key={item.id}
                onClick={() => setActiveTab(item.id)}
                className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg mb-2 transition-colors ${
                  activeTab === item.id
                    ? "bg-accent text-primary"
                    : "text-muted-foreground hover:bg-muted"
                }`}
              >
                <Icon className="w-5 h-5" />
                <span>{item.label}</span>
              </button>
            );
          })}
        </nav>
      </aside>

      {/* Main Content */}
      <main className="flex-1 overflow-auto">
        {activeTab === "dashboard" && <Dashboard setActiveTab={setActiveTab} />}
        {activeTab === "inventory" && <Inventory />}
        {activeTab === "protocol" && <ProtocolChecker />}
      </main>
    </div>
  );
}