import { MessageCircle, FolderOpen, Image, Settings } from 'lucide-react';
import { useAppStore } from '@/store';
import type { NavView } from '@/types';
import { cn } from '@/lib/utils';

const navItems: { id: NavView; icon: typeof MessageCircle; label: string }[] = [
  { id: 'chat', icon: MessageCircle, label: '对话' },
  { id: 'accounts', icon: FolderOpen, label: '账户' },
  { id: 'assets', icon: Image, label: '资产' },
  { id: 'config', icon: Settings, label: '设置' },
];

export function Sidebar() {
  const { activeView, setActiveView } = useAppStore();

  return (
    <aside className="w-14 flex flex-col items-center py-4 gap-2 border-r border-zinc-800">
      {navItems.map(({ id, icon: Icon, label }) => (
        <button
          key={id}
          onClick={() => setActiveView(id)}
          className={cn(
            'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
            activeView === id
              ? 'bg-zinc-800 text-white'
              : 'text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/50'
          )}
          title={label}
        >
          <Icon size={20} />
        </button>
      ))}
    </aside>
  );
}
