import { useState } from 'react'
import './App.css'
import AssetManagementView from './components/AssetManagementView'
import HardwareManagementView from './components/HardwareManagementView'

function App() {
  const [activeMenu, setActiveMenu] = useState('assets')

  const renderContent = () => {
    switch (activeMenu) {
      case 'assets':
        return <AssetManagementView />
      case 'hardware':
        return <HardwareManagementView />
      default:
        return <AssetManagementView />
    }
  }

  return (
    <div className="app-container">
      <header className="top-bar">
        <div className="top-bar-brand">
          ITAM System
        </div>
        <nav className="top-bar-menu">
          <div 
            className={`menu-item ${activeMenu === 'assets' ? 'active' : ''}`}
            onClick={() => setActiveMenu('assets')}
          >
            전산자산관리대장
          </div>
          <div 
            className={`menu-item ${activeMenu === 'hardware' ? 'active' : ''}`}
            onClick={() => setActiveMenu('hardware')}
          >
            H/W 사양 정보
          </div>
          <div className="menu-item">S/W 설치 현황</div>
          <div className="menu-item">라이선스 관리</div>
          <div className="menu-item">실물 자산 관리</div>
        </nav>
      </header>
      <main className="main-content">
        {renderContent()}
      </main>
    </div>
  )
}

export default App