import { useState } from 'react';
import { FileText, Box } from 'lucide-react';
import { ApiDocViewer } from './components/ApiDocViewer';
import BlueprintPage from './components/blueprint/BlueprintPage';
import { config } from './config';

type Page = 'docs' | 'blueprint';

function App() {
  const [currentPage, setCurrentPage] = useState<Page>('docs');
  
  document.title = config.projectName;

  return (
    <div className="h-screen flex flex-col">
      <header className="h-12 bg-zinc-900 border-b border-zinc-800 flex items-center px-4 justify-between">
        <h1 className="text-sm font-medium text-white">{config.projectName}</h1>
        <nav className="flex gap-1">
          <button
            onClick={() => setCurrentPage('docs')}
            className={`flex items-center gap-2 px-3 py-1.5 rounded text-sm ${
              currentPage === 'docs' 
                ? 'bg-zinc-800 text-white' 
                : 'text-zinc-400 hover:text-white hover:bg-zinc-800/50'
            }`}
          >
            <FileText size={16} />
            API 文档
          </button>
          <button
            onClick={() => setCurrentPage('blueprint')}
            className={`flex items-center gap-2 px-3 py-1.5 rounded text-sm ${
              currentPage === 'blueprint' 
                ? 'bg-zinc-800 text-white' 
                : 'text-zinc-400 hover:text-white hover:bg-zinc-800/50'
            }`}
          >
            <Box size={16} />
            3D 蓝图
          </button>
        </nav>
      </header>
      <main className="flex-1 overflow-hidden">
        {currentPage === 'docs' ? <ApiDocViewer /> : <BlueprintPage />}
      </main>
    </div>
  );
}

export default App;