components/Sidebar.jsx

import { useState } from 'react'
import { FiFile, FiFolder, FiChevronDown, FiChevronRight, FiPlus, FiSettings, FiSearch, FiGithub, FiTerminal, FiDebug, FiExtensions, FiUser, FiBook } from 'react-icons/fi'

export default function Sidebar() {
  const [expanded, setExpanded] = useState({
    explorer: true,
    search: false,
    sourceControl: false,
    run: false,
    extensions: false
  })

  const toggleSection = (section) => {
    setExpanded(prev => ({ ...prev, [section]: !prev[section] }))
  }

  return (
    <div className="w-64 bg-sidebar text-gray-300 h-full flex flex-col">
      <div className="p-3 border-b border-border">
        <div className="flex items-center space-x-2 mb-4">
          <FiFile className="text-blue-400" />
          <span className="text-sm">Explorer</span>
        </div>
        <div className="space-y-1">
          <button className="w-full text-left p-2 rounded hover:bg-panel transition-colors flex items-center space-x-2">
            <FiFolder className="text-blue-400" />
            <span className="text-sm">Open Folder</span>
          </button>
          <button className="w-full text-left p-2 rounded hover:bg-panel transition-colors flex items-center space-x-2">
            <FiFile className="text-gray-400" />
            <span className="text-sm">New File</span>
          </button>
        </div>
      </div>

      <div className="flex-1 overflow-y-auto">
        <div className="p-2">
          <div className="flex items-center justify-between p-1 hover:bg-panel rounded cursor-pointer" onClick={() => toggleSection('explorer')}>
            <div className="flex items-center space-x-2">
              <FiFolder className="text-blue-400" />
              <span className="text-sm">PROJECTS</span>
            </div>
            {expanded.explorer ? <FiChevronDown /> : <FiChevronRight />}
          </div>
          {expanded.explorer && (
            <div className="ml-4 mt-1 space-y-1">
              <div className="flex items-center space-x-2 p-1 hover:bg-panel rounded">
                <FiFolder className="text-yellow-400" />
                <span className="text-sm">src</span>
              </div>
              <div className="flex items-center space-x-2 p-1 hover:bg-panel rounded">
                <FiFile className="text-gray-400" />
                <span className="text-sm">package.json</span>
              </div>
              <div className="flex items-center space-x-2 p-1 hover:bg-panel rounded">
                <FiFile className="text-gray-400" />
                <span className="text-sm">README.md</span>
              </div>
            </div>
          )}
        </div>
      </div>

      <div className="p-2 border-t border-border">
        <div className="space-y-2">
          <button className="w-full text-left p-2 rounded hover:bg-panel transition-colors flex items-center space-x-2">
            <FiSettings className="text-gray-400" />
            <span className="text-sm">Settings</span>
          </button>
          <button className="w-full text-left p-2 rounded hover:bg-panel transition-colors flex items-center space-x-2">
            <FiExtensions className="text-gray-400" />
            <span className="text-sm">Extensions</span>
          </button>
          <button className="w-full text-left p-2 rounded hover:bg-panel transition-colors flex items-center space-x-2">
            <FiBook className="text-gray-400" />
            <span className="text-sm">Documentation</span>
          </button>
        </div>
      </div>
    </div>
  )
}