// "use client";

// import React, { useState } from "react";
// import { useRouter } from "next/navigation";
// import Link from 'next/link';

// function Dashboard() { // 2. Changed from 'export default function'
//   const router = useRouter();
//   const [query, setQuery] = useState("");
//   const [sideBarOpen, setSidebarOpen] = useState(true);

//   const projects = [
//     { name: "Alpha Project", createdAt: "2025-01-01" },
//     { name: "Beta Board", createdAt: "2025-02-15" },
//     { name: "Gamma Tasl", createdAt: "2025-03-10" },
//   ];
//   const filtered = projects.filter((p) =>
//     p.name.toLowerCase().includes(query.toLowerCase())
//   );

//   return (
//     <div className="flex min-h-screen bg-zinc-50 dark:bg-black font-sans transition-all duration-300">
//       <aside
//         className={`${
//           sideBarOpen ? "w-64" : "w-16"
//         } bg-white dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-800 transition-all duration-300 flex flex-col`}
//       >
//         <div className="flex items-center justify-between p-4 border-b border-zinc-200 dark:border-zinc-800">
//           {sideBarOpen && (
//             <span className="text-lg font-semibold text-zinc-800 dark:text-zinc-100">
//               More
//             </span>
//           )}
//           <button
//             onClick={() => setSidebarOpen(!sideBarOpen)}
//             className="text-zinc-600 dark:text-zinc-300 hover:text-blue-500 transition-colors"
//             title="Toggle Sidebar"
//           >
//             ☰
//           </button>
//         </div>

//         <nav
//           className={`flex flex-col p-4 gap-3 text-zinc-700 dark:text-zinc-300 transition-opacity duration-200 ${
//             sideBarOpen ? "opacity-100" : "opacity-0"
//           }`}
//         >
//           <Link
//             href="/"
//             className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
//           >
//             Home
//           </Link>
//           <p
//             className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
//           >
//             Settings
//           </p>
//           {/* 3. Added the Logout link here */}
//           <Link
//             href="/auth/logout"
//             className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
//           >
//             Logout
//           </Link>
//         </nav>
//       </aside>

//       <div className="flex-1 flex flex-col min-w-0">
//         <header className="sticky top-0 z-10 bg-white dark:bg-black/80 backdrop-blur-sm border-b border-zinc-200 dark:border-zinc-800">
//           <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between gap-4">
//             <div className="flex-1">
//               <input
//                 id="dashboard-search"
//                 value={query}
//                 onChange={(e) => setQuery(e.target.value)}
//                 placeholder="Search projects, boards or tasks..."
//                 className="w-full max-w-md px-4 py-2 rounded-md border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
//               />
//             </div>

//             <div className="flex items-center gap-2">
//               <button
//                 type="button"
//                 onClick={() => router.push("/dashbaord/create")}
//                 className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md shadow-sm"
//               >
//                 Create
//               </button>
//             </div>
//           </div>
//         </header>

//         <main className="max-w-7xl w-full mx-auto px-6 py-10">
//           <h1 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-4">
//             Project Names
//           </h1>

//           <section>
//             <ul className="space-y-3">
//               {filtered.map((project, index) => (
//                 <li
//                   key={index}
//                   className="flex justify-between p-4 bg-white dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800 rounded-md text-zinc-800 dark:text-zinc-100"
//                 >
//                   <span>{project.name}</span>
//                   <span className="text-zinc-500 dark:text-zinc-400 text-sm">
//                     Created: {project.createdAt}
//                   </span>
//                 </li>
//               ))}
//               {filtered.length === 0 && (
//                 <li className="text-zinc-500">No results found</li>
//               )}
//             </ul>
//           </section>
//         </main>
//       </div>
//     </div>
//   );
// }