import { History, Sparkles, Map } from 'lucide-react';

/**
 * 导航项配置
 */
const navGroups = [
  {
    title: '回溯过去',
    items: [
      { id: 'timeline', label: '人生轨迹', icon: History }
    ]
  },
  {
    title: '创造未来',
    items: [
      { id: 'script', label: '爽文剧本', icon: Sparkles },
      { id: 'path', label: '实现路径', icon: Map }
    ]
  }
];

/**
 * Sidebar 组件
 * 仪表盘侧边栏导航
 * @param {Object} props
 * @param {'timeline'|'script'|'path'} props.activeView - 当前激活的视图
 * @param {Function} props.onViewChange - 视图切换回调
 */
const Sidebar = ({ activeView, onViewChange }) => {
  return (
    <aside className="md:col-span-3 border-r border-white/5 p-6 flex flex-col gap-6 bg-black/20">
      {/* 导航分组 */}
      {navGroups.map((group) => (
        <div key={group.title} className="space-y-2">
          {/* 分组标题 */}
          <div className="px-3 py-2 text-[10px] text-white/30 uppercase tracking-[0.2em] font-bold">
            {group.title}
          </div>
          
          {/* 导航项 */}
          {group.items.map((item) => {
            const Icon = item.icon;
            const isActive = activeView === item.id;
            
            return (
              <button
                key={item.id}
                onClick={() => onViewChange(item.id)}
                className={`
                  nav-item w-full flex items-center gap-3 p-4 rounded-2xl glass-btn text-white/50
                  ${isActive ? 'active' : ''}
                `}
              >
                <Icon className="w-5 h-5" />
                <span>{item.label}</span>
              </button>
            );
          })}
        </div>
      ))}

      {/* 底部引用文字 */}
      <div className="mt-auto p-4 bg-white/[0.02] rounded-2xl border border-white/5">
        <p className="text-[10px] text-white/20 italic leading-relaxed">
          "回溯过去、记录当下、创造未来。"
        </p>
      </div>
    </aside>
  );
};

export default Sidebar;
