import { useState } from 'react'
import Explorer from './pages/Explorer'
import Dashboard from './pages/Dashboard'
import './App.css'

type Tab = 'dashboard' | 'explorer'

function App() {
  const [activeTab, setActiveTab] = useState<Tab>('dashboard')

  return (
    <div className="app">
      <nav className="navbar">
        <h1>🤖 LLM Intelligence Hub</h1>
        <div className="tabs">
          <button
            className={activeTab === 'dashboard' ? 'active' : ''}
            onClick={() => setActiveTab('dashboard')}
          >
            📊 Dashboard
          </button>
          <button
            className={activeTab === 'explorer' ? 'active' : ''}
            onClick={() => setActiveTab('explorer')}
          >
            🔍 Explorer
          </button>
        </div>
      </nav>
      <main className="main">
        {activeTab === 'dashboard' && <Dashboard />}
        {activeTab === 'explorer' && <Explorer />}
      </main>
    </div>
  )
}

export default App