import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
import { ConfigProvider, App as AntApp } from 'antd';
import { App as ContainerApp } from './pages/container';
import { App as PanelApp } from './pages/panel';
import { App as PublishApp } from './pages/publish';
import { App as CodeEditorApp } from './pages/code-editor';
import { App as MapApp } from './pages/map';
import { App as PromptApp } from './pages/prompt';
import { App as AiAgentApp } from './pages/ai-agent';
import { App as UserApp } from './pages/user';
import '@abearxiong/container/dist/container.css';

export const App = () => {
  return (
    <div className='w-full h-full'>
      <ConfigProvider
        theme={{
          token: {},
        }}>
        <Router>
          <Routes>
            <Route path='/' element={<Navigate to='/container/' />} />
            <Route path='/container/*' element={<ContainerApp />} />
            <Route path='/panel/*' element={<PanelApp />} />
            <Route path='/publish/*' element={<PublishApp />} />
            <Route path='/code-editor' element={<CodeEditorApp />} />
            <Route path='/map/*' element={<MapApp />} />
            <Route path='/prompt/*' element={<PromptApp />} />
            <Route path='/agent/*' element={<AiAgentApp />} />
            <Route path='/user/*' element={<UserApp />} />
            <Route path='/404' element={<div>404</div>} />
            <Route path='*' element={<div>404</div>} />
          </Routes>
        </Router>
      </ConfigProvider>
      <div id='for-modal'></div>
    </div>
  );
};