'use client';
import { usePathname, useRouter } from 'next/navigation';
import { LuLayoutDashboard } from 'react-icons/lu';
import { RiUser4Line } from 'react-icons/ri';
import { TbHome2, TbLogout2 } from 'react-icons/tb';



export default function Sidebar() {
  const router = useRouter();
  const pathname = usePathname(); // Get the current route

 
  // Define the routes with relevant icons
  const routes = [
    {
      name: 'Dashboard',
      path: '/dashboard',
      icon: <LuLayoutDashboard size={18} />,
    },
    {
      name: 'Home',
      path: '/home',
      icon:  <TbHome2 size={18}/>,
    },
    {
      name: 'Profile',
      path: '/profile',
      icon:  <RiUser4Line size={18} />,
    },
  ];

  const handleLogout = async () => {
    try {
      const response = await fetch('/api/auth/logout', {
        method: 'GET',
        credentials: 'include', // Ensure cookies are sent
      });

      if (response.ok) {
        console.log('Logout successful');
        router.push('/login'); // Redirect to login page
      } else {
        console.error('Failed to log out:', response.status);
      }
    } catch (error) {
      console.error('Error while logging out:', error);
    }
  };

  return (
    // <div className="bg-blue-950 text-white h-full z-10 rounded-xl shadow-md transition-width ease-in-out duration-150 w-16 hover:w-1/5">
    <div className="bg-blue-950 text-white h-full z-10 rounded-xl shadow-md transition-width ease-in-out duration-150 w-1/5">
      <div className="flex items-center justify-start py-2 ps-3 gap-2">
      <img src="/images/logo2.png" width={40} alt="Logo" /><h1 className="text-lg font-black ">
      P ink A ura</h1>
      </div>
      <nav className="mt-6">
        <ul className="p-2">
          {/* Map through the routes */}
          {routes.map((route) => (
            <li
              key={route.path}
              onClick={() => router.push(route.path)}
              className={`flex items-center gap-3 px-4 mb-1 rounded-md py-2 text-sm cursor-pointer transition duration-150  ${
                pathname === route.path
                  ? 'bg-pink-500 text-white' // Active class
                  : 'hover:bg-pink-500 hover:text-white' // Hover class
              }`}
            >
              {route.icon} {/* Render the icon */}
              <p>{route.name}</p>
            </li>
          ))}
          {/* Logout option */}
          <li
            onClick={handleLogout}
            className="flex items-center gap-3 px-4 mb-0 rounded-md py-2 hover:bg-pink-500 hover:text-white text-sm cursor-pointer transition duration-150"
          ><TbLogout2 size={18} />
            <p>Logout</p>
          </li>
        </ul>
      </nav>
    </div>
  );
}