import { NavLink } from 'react-router-dom';
import { MessageCircle, FolderOpen, Image, Settings } from 'lucide-react';
import { cn } from '@/lib/utils';

const navItems = [
  { to: '/chat', icon: MessageCircle, label: '对话' },
  { to: '/accounts', icon: FolderOpen, label: '账户' },
  { to: '/assets', icon: Image, label: '资产' },
  { to: '/settings', icon: Settings, label: '设置' },
];

export function Sidebar() {
  return (
    <aside className="w-16 flex flex-col items-center py-5 gap-1.5 border-r border-zinc-100 bg-white">
      {navItems.map(({ to, icon: Icon, label }) => (
        <NavLink
          key={to}
          to={to}
          title={label}
          className={({ isActive }) =>
            cn(
              'w-11 h-11 flex flex-col items-center justify-center gap-0.5 rounded-xl transition-all duration-200 text-[10px] font-medium',
              isActive
                ? 'bg-indigo-50 text-indigo-600 shadow-sm shadow-indigo-100'
                : 'text-zinc-400 hover:text-zinc-600 hover:bg-zinc-50'
            )
          }
        >
          <Icon size={17} strokeWidth={1.8} />
          <span>{label}</span>
        </NavLink>
      ))}
    </aside>
  );
}
