import { StyledEngineProvider } from '@mui/material/styles';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import './App.css';
import { BasketProvider } from './helper/BasketProvider';
import NavBar from './helper/navbar/NavBar';
import Account from './pages/Account';
import Contact from './pages/Contact';
import Home from './pages/Home';
import NoPage from './pages/NoPage';
import Orders from './pages/Orders';
import Payment from './pages/Payment';
import Product from './pages/Product';
import { CustomThemeProvider } from './theme/ThemeContext';
import FSModel from './pages/FSModel';
import AdminPanel from './pages/AdminPanel';

export default function App() {

  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <StyledEngineProvider injectFirst>
        <CustomThemeProvider>
          <BasketProvider>
            <BrowserRouter>
              <NavBar />
              <Routes>
                <Route path="/" element={<Home />} />
                <Route path="*" element={<NoPage />} />
                <Route path="/product/:id" element={<Product />} />
                <Route path="/checkout" element={<Payment />} />
                <Route path="/fsmodel" element={<FSModel />} />
                <Route path="/contact" element={<Contact />} />
                <Route path='/account' element={<Account />} />
                <Route path='/orders' element={<Orders />} />
                <Route path='/admin' element={<AdminPanel />} />
              </Routes>
            </BrowserRouter>
          </BasketProvider>
        </CustomThemeProvider>
      </StyledEngineProvider>
    </QueryClientProvider>
  )
}