import { Gauge, ShoppingCart, Warehouse, BarChart3, ScanEye, Boxes, Tags } from "lucide-react";
import { NavLink } from "react-router-dom";
import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarFooter } from "@/components/ui/sidebar";
import { ThemeToggle } from "@/components/ThemeToggle";
import { cn } from "@/lib/utils";
// Remove this line:

const menuItems = [{
  title: "Dashboard",
  url: "/",
  icon: Gauge
}, {
  title: "Operation Intelligence",
  url: "/operation-intelligence",
  icon: ScanEye
}, {
  title: "Inventory",
  url: "/inventory",
  icon: Boxes
}, {
  title: "Warehouse Operations",
  url: "/warehouse",
  icon: Warehouse
}, {
  title: "Orders",
  url: "/orders",
  icon: ShoppingCart
}, {
  title: "Analytics",
  url: "/analytics",
  icon: BarChart3
}, {
  title: "Products",
  url: "/product",
  icon: Tags
}];

export function AppSidebar() {
  return <Sidebar>
      <SidebarContent>
        <div className="px-6 py-4 border-b border-sidebar-border">
          <div className="flex items-center gap-3">
            <div className="h-10 w-10 rounded-lg bg-background flex items-center justify-center overflow-hidden">
              <img 
                src="/logo.svg" 
                alt="DroneX Logo" 
                className="h-full w-full object-contain" 
              />
            </div>
            <div>
              <p className="text-lg font-bold text-foreground tracking-tight">Aerostack</p>
              <p className="text-xs font-semibold text-muted-foreground/80 tracking-wide">DroneX Delivery Solutions</p>
            </div>
          </div>
        </div>

        <SidebarMenu>
          {menuItems.map(item => <SidebarMenuItem key={item.title}>
              <NavLink to={item.url} className={({ isActive }) => cn("flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary", {
                "text-primary bg-muted": isActive
              })}>
                <item.icon className="h-4 w-4" />
                {item.title}
              </NavLink>
            </SidebarMenuItem>)}
        </SidebarMenu>
      </SidebarContent>

      <SidebarFooter>
        <div className="flex items-center justify-between px-4 py-2">
          <ThemeToggle />
        </div>
      </SidebarFooter>
    </Sidebar>;
}