'use client';

import { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function Sidebar() {
  const pathname = usePathname();
  const [isCollapsed, setIsCollapsed] = useState(false);

  const menuItems = [
    { name: '工作台', href: '/dashboard', icon: 'ri-dashboard-line' },
    { name: 'Agent管理', href: '/agents', icon: 'ri-robot-line' },
    { name: '工作流', href: '/workflows', icon: 'ri-flow-chart' },
    { name: '知识库', href: '/knowledge', icon: 'ri-book-line' },
    { name: '模板市场', href: '/templates', icon: 'ri-store-line' },
    { name: '数据分析', href: '/analytics', icon: 'ri-bar-chart-line' },
    { name: '设置', href: '/settings', icon: 'ri-settings-line' }
  ];

  return (
    <div className={`bg-white border-r border-gray-200 flex-shrink-0 transition-all duration-300 ${
      isCollapsed ? 'w-16' : 'w-64'
    }`}>
      <div className="p-6">
        <h2 className="text-lg font-semibold text-gray-900 mb-6">导航菜单</h2>
        <nav className="space-y-2">
          {menuItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={`flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors cursor-pointer ${
                pathname === item.href
                  ? 'bg-blue-50 text-blue-600 border-l-4 border-blue-600'
                  : 'text-gray-700 hover:bg-gray-50'
              }`}
            >
              <div className="w-5 h-5 flex items-center justify-center">
                <i className={`${item.icon} text-lg`}></i>
              </div>
              <span className="font-medium">{item.name}</span>
            </Link>
          ))}
        </nav>
      </div>
    </div>
  );
}