import { SIDEBAR_ITEMS } from "@/constants/constant";
import SidebarItem from "./sideBarItem";
import {
  ShieldCheck,  
  Activity,
  ChevronDown,
  ChevronsLeft,
} from "lucide-react";
import { useSession, signOut } from "next-auth/react";
export default function Sidebar() {
  const { data: session } = useSession();
  console.log("Session data ",session?.user?.name)
console.log("Session data ",session?.user?.email)
  return (
    <aside className="fixed bg-[#071321] text-white h-screen overflow-y-auto [scrollbar-color:#1b2a40_#071321] [scrollbar-width:thin]">
        <div className="flex items-center gap-2 px-2 pt-2 pb-3">
        <div className="flex h-9 w-9 items-center justify-center rounded-lg 
        bg-[#3de0c4] font-bold text-[#05111d] text-sm">
          K
        </div>
        <span className="text-sm font-bold tracking-tight text-white">
          KA<span className="text-[#3de0c4]">FM</span>
        </span>
      </div>
      <hr className="border-[#142538]" />
      <div className="mx-4 my-4 flex rounded-xl
       bg-[#091624] p-2 border border-[#142538]">
        <button className="flex flex-1 
        items-center justify-center gap-1 rounded-lg bg-[#3de0c4] py-1.5 text-xs 
        text-black font-bold shadow-sm">
          <Activity size={14} />
          Operations
        </button>
        <button className="flex flex-1 items-center justify-center gap-1
         rounded-lg py-1 text-xs text-slate-400 font-medium hover:text-white transition-colors">
          <ShieldCheck size={14} />
          Admin
        </button>
      </div>

      <p className="px-2 text-xs font-semibold uppercase 
      tracking-wider text-slate-500">
        Tenant runtime
      </p>
      <div className="py-1">
        {SIDEBAR_ITEMS.map((item) => (
          <SidebarItem
            key={item.title}
            item={item}
          
          />
        ))}
      </div>
      <div className="px-3 pb-2 pt-1
       border-t border-[#0f1f30]">
        <button className="flex w-full items-center gap-2 rounded-xl py-2 px-3 text-xs text-slate-400 hover:bg-[#091624] hover:text-white transition-colors">
          <ChevronsLeft size={16} />
          Minimise menu
        </button>
      </div>

      {/* Profile Card Section */}
      <div className="m-3 mt-0 rounded-xl border border-[#142538] bg-[#071321] p-2.5">
        <div className="flex items-center justify-between">
          <div className="flex gap-2.5 items-center">
            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-cyan-600/50 bg-[#0d2430] text-cyan-400 text-xs font-bold">
              DT
            </div>
            <div className="min-w-0 leading-tight">
              <h4 className="font-semibold text-xs text-white truncate">{session?.user?.name}</h4>
              <p className="text-[11px] text-slate-500 truncate">
                {session?.user?.email}
              </p>
            </div>
          </div>
          <ChevronDown className="-rotate-90 text-slate-500 shrink-0" size={14}
           onClick={() => signOut({ callbackUrl: "/login" })} />
        </div>
        </div>
    </aside>
  );
}