Frontend/src/components/dashboard/Sidebar.tsx

import React from "react";
import { Link, useLocation } from "react-router-dom";
import { 
  Home, FileText, Brain, BookOpen, 
  Bell, Settings, User, LogOut 
} from "lucide-react";

interface SidebarProps {
  onLogout?: () => void;
}

const Sidebar: React.FC<SidebarProps> = ({ onLogout }) => {
  const location = useLocation();

  const navItems = [
    { path: "/", label: "Dashboard", icon: <Home size={18} /> },
    { path: "/notes", label: "Notes", icon: <BookOpen size={18} /> },
    { path: "/AIInterview", label: "AI Interview", icon: <Brain size={18} /> },
    { path: "/quize", label: "Resume Quiz", icon: <FileText size={18} /> },
  ];
  return (
    <aside className="w-64 bg-gray-900 text-white flex flex-col justify-between">
      
      {/* Top Section */}
      <div>
        <div className="text-2xl font-bold text-center py-6 border-b border-gray-700">
          InterviewAI
        </div>

        <nav className="p-4 space-y-3">
          {navItems.map((item) => (
            <Link
              key={item.path}
              to={item.path}
              className={`flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition ${
                location.pathname === item.path ? "bg-gray-800" : ""
              }`}
            >
              {item.icon}
              <span>{item.label}</span>
            </Link>
          ))}
        </nav>
      </div>

      {/* Bottom Section (From Header) */}
      <div className="p-4 border-t border-gray-700 space-y-4">
        <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition w-full text-left">
          <Bell size={18} />
          <span>Notifications</span>
        </button>

        <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition w-full text-left">
          <Settings size={18} />
          <span>Settings</span>
        </button>

        <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition w-full text-left">
          <User size={18} />
          <span>John Doe</span>
        </button>

        <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-red-600/20 text-red-400 transition w-full text-left">
          <LogOut size={18} />
          <span>Logout</span>
        </button>
      </div>

    </aside>
  );
};

export default Sidebar;