
import { cn } from "@/lib/utils";
import {
  BookOpen,
  FolderKanban,
  HelpCircle,
  LayoutDashboard,
  LogOut,
  MessageSquareQuote,
  User,
  Users,
} from "lucide-react";
import { Link } from "react-router-dom";

const navItems = [
  { title: "Overview", icon: LayoutDashboard, href: "/dashboard" },
  { title: "Manage Projects", icon: FolderKanban, href: "/dashboard/projects" },
  { title: "Manage Team", icon: Users, href: "/dashboard/team" },
  {
    title: "Manage Client Review",
    icon: MessageSquareQuote,
    href: "/dashboard/reviews",
  },
  { title: "Manage Blogs", icon: BookOpen, href: "/dashboard/blogs" },
  { title: "Manage FAQ", icon: HelpCircle, href: "/dashboard/faq" },
];

export default function Sidebar({ isCollapsed }: { isCollapsed: boolean }) {
  return (
    <aside
      className={cn(
        "sticky top-0 h-screen border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-all duration-300 flex flex-col",
        isCollapsed ? "w-17" : "w-70",
      )}
    >
    
      <div className="h-16 flex items-center px-6">
        <Link to="/" className={cn("font-bold truncate text-4xl", isCollapsed && "hidden")}>
          TechZaa
        </Link>
        {isCollapsed && <span className="font-bold mx-auto text-xl">TZ</span>}
      </div>

      {/* Navigation */}
      <nav className="flex-1 p-3 space-y-1 overflow-y-auto">
        {navItems.map((item) => (
          <Link
            key={item.title}
            to={item.href}
            className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors group"
          >
            <item.icon className="h-5 w-5 shrink-0" />
            {!isCollapsed && (
              <span className="text-sm font-medium">{item.title}</span>
            )}
          </Link>
        ))}
      </nav>

      {/* Footer: Signout & Profile */}
      <div className="p-3 border-t border-sidebar-border space-y-1">
        <button className="w-full flex items-center gap-3 px-3 py-2 rounded-md text-destructive hover:bg-destructive/10 transition-colors">
          <LogOut className="h-5 w-5 shrink-0" />
          {!isCollapsed && (
            <span className="text-sm font-medium">Sign Out</span>
          )}
        </button>

        <div className="flex items-center gap-3 px-3 py-3 mt-2 rounded-lg bg-sidebar-accent/50">
          <div className="h-8 w-8 rounded-full bg-sidebar-primary flex items-center justify-center text-sidebar-primary-foreground">
            <User className="h-5 w-5" />
          </div>
          {!isCollapsed && (
            <div className="flex flex-col truncate">
              <span className="text-xs font-semibold">User Name</span>
              <span className="text-[10px] opacity-70">admin@site.com</span>
            </div>
          )}
        </div>
      </div>
    </aside>
  );
}
