"use client";

import Image from "next/image";
import Link from "next/link";
import { Montserrat } from "next/font/google";

import { cn } from "@/lib/utils";
import {
  Brain,
  Code,
  FileQuestion,
  ImageIcon,
  LayoutDashboard,
  MessageSquare,
  User,
} from "lucide-react";
import { usePathname } from "next/navigation";

const montserrat = Montserrat({
  weight: "600",
  subsets: ["latin"],
});

const routes = [
  {
    label: "Dashboard",
    icon: LayoutDashboard,
    href: "/dashboard",
    color: "text-sky-500",
  },
  {
    label: "Quiz Generation",
    icon: FileQuestion,
    href: "/quiz",
    color: "text-violet-500",
  },
  {
    label: "Doubts Solving",
    icon: MessageSquare,
    href: "/conversation",
    color: "text-red-500",
  },  
  {
    label: "Coding Assistant",
    icon: Code,
    href: "/code",
    color: "text-green-700",
  },
  {
    label: "Interview PrepAI",
    icon: User,
    href: "/interview",
    color: "text-yellow-500",
  }
];


const Sidebar = () => {
  const pathname = usePathname();
  return (
    <div className="space-y-4 py-4 flex flex-col h-full bg-[#111827] text-white">
      <div className="px-3 py-2 flex-1 items-center">
        <Link href="/dashboard" className="flex items-center pl-3 mb-6">
          <div className="relative w-8 h-8 mr-4">
            {/* <Image fill alt="logo" src="/logo.png" /> */}
            <Brain className="h-8 w-8 text-purple-600"/>
          </div>
          <h1 className={cn("text-2xl font-bold", montserrat.className)}>
            AssessMate
          </h1>
        </Link>
        <div className="space-y-1">
          {routes.map((route) => (
            <Link
              href={route.href}
              key={route.href}
              className={cn(
                "text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:text-white hover:bg-white/10 rounded-lg transition",
                pathname === route.href
                  ? "text-white bg-white/10"
                  : "text-zinc-400"
              )}
            >
              <div className="flex items-center flex-1">
                <route.icon className={cn("h-5 w-5 mr-3", route.color)} />
                {route.label}
              </div>
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Sidebar;