'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Brain, Search, MessageSquare, Tag, GitGraph, Home } from 'lucide-react';
import clsx from 'clsx';

const NAV_ITEMS = [
  { href: '/',        label: 'Home',     icon: Home },
  { href: '/search',  label: 'Search',   icon: Search },
  { href: '/chat',    label: 'Chat',     icon: MessageSquare },
  { href: '/tags',    label: 'Tags',     icon: Tag },
  { href: '/graph',   label: 'Graph',    icon: GitGraph },
];

export default function Sidebar() {
  const pathname = usePathname();

  return (
    <aside className="w-56 shrink-0 bg-slate-900 text-slate-300 flex flex-col h-screen">
      <div className="flex items-center gap-2.5 px-5 py-5 border-b border-slate-700">
        <Brain size={22} className="text-brain-400" />
        <span className="font-bold text-white text-lg">Second Brain</span>
      </div>

      <nav className="flex-1 py-4 space-y-1 px-2">
        {NAV_ITEMS.map(({ href, label, icon: Icon }) => (
          <Link
            key={href}
            href={href}
            className={clsx(
              'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
              pathname === href
                ? 'bg-brain-700 text-white'
                : 'hover:bg-slate-800 hover:text-white',
            )}
          >
            <Icon size={16} />
            {label}
          </Link>
        ))}
      </nav>

      <div className="px-4 py-4 border-t border-slate-700 text-xs text-slate-500">
        AI Second Brain v1.0.0
      </div>
    </aside>
  );
}