import React from "react";

export type SettingsSection = "llm" | "trading" | "stocks" | "system";

interface SettingsSidebarProps {
  activeSection: SettingsSection;
  onSectionChange: (section: SettingsSection) => void;
}

const sections: { id: SettingsSection; label: string; icon: string }[] = [
  { id: "llm", label: "LLM & Agents", icon: "🧠" },
  { id: "trading", label: "Trading Defaults", icon: "📊" },
  { id: "stocks", label: "Stock Database", icon: "📋" },
  { id: "system", label: "System", icon: "⚙️" },
];

export default function SettingsSidebar({ activeSection, onSectionChange }: SettingsSidebarProps) {
  return (
    <aside className="w-60 border-r border-gray-200 bg-white h-full sticky top-0 overflow-y-auto">
      <div className="p-6">
        <h2 className="text-lg font-bold text-gray-900 mb-6">Settings</h2>
        <nav className="space-y-1">
          {sections.map((section) => (
            <button
              key={section.id}
              onClick={() => onSectionChange(section.id)}
              className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
                activeSection === section.id
                  ? "bg-blue-50 text-blue-700 border-l-4 border-blue-600"
                  : "text-gray-700 hover:bg-gray-50"
              }`}
            >
              <span>{section.icon}</span>
              <span>{section.label}</span>
            </button>
          ))}
        </nav>
      </div>
    </aside>
  );
}