import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { App as AntdApp } from 'antd';
import { AuthProvider } from './context/AuthContext';
import Layout from './components/Layout';
import Home from './pages/Home';
import ProductDetail from './pages/ProductDetail';
import Payment from './pages/Payment';
import AIServices from './pages/AIServices';
import ServiceDetail from './pages/ServiceDetail';
import VCCourses from './pages/VCCourses';
import VCCourseDetail from './pages/VCCourseDetail';
import MyOrders from './pages/MyOrders';
import ForumList from './pages/ForumList';
import ForumDetail from './pages/ForumDetail';
import ActivityDetail from './pages/activity/Detail';
import CompetitionList from './components/competition/CompetitionList';
import CompetitionDetail from './components/competition/CompetitionDetail';
import ProjectDetail from './components/competition/ProjectDetail';
import 'antd/dist/reset.css';
import './App.css';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AntdApp>
        <AuthProvider>
          <BrowserRouter>
            <Layout>
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/services" element={<AIServices />} />
              <Route path="/services/:id" element={<ServiceDetail />} />
              <Route path="/courses" element={<VCCourses />} />
              <Route path="/courses/:id" element={<VCCourseDetail />} />
              <Route path="/forum" element={<ForumList />} />
              <Route path="/forum/:id" element={<ForumDetail />} />
              <Route path="/competitions" element={<CompetitionList />} />
              <Route path="/competitions/:id" element={<CompetitionDetail />} />
              <Route path="/projects/:id" element={<ProjectDetail />} />
              <Route path="/activity/:id" element={<ActivityDetail />} />
              <Route path="/my-orders" element={<MyOrders />} />
              <Route path="/product/:id" element={<ProductDetail />} />
              <Route path="/payment/:orderId" element={<Payment />} />
            </Routes>
          </Layout>
          </BrowserRouter>
        </AuthProvider>
      </AntdApp>
    </QueryClientProvider>
  )
}

export default App