import { Routes, Route} from 'react-router';
import Home from './pages/home.tsx';
import InventoryList from "./features/inventory/InventoryList.tsx";
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
import {createTheme, MantineProvider} from '@mantine/core';
import '@mantine/core/styles.css';
import ItemDetail from "./features/inventory/ItemDetail.tsx";

// Create a client
const queryClient = new QueryClient()

const barkTheme = createTheme({
  primaryColor: 'red',
  colors: {
    'red': [
      "#ffe8e8",
      "#ffcfd0",
      "#fd9d9d",
      "#fb6868",
      "#fa3c3b",
      "#f9211e",
      "#fa120f",
      "#df0404",
      "#c70002",
      "#ae0000"
    ],
  },

});

function App() {
  return <MantineProvider defaultColorScheme="auto" theme={barkTheme}>{ (
      <QueryClientProvider client={queryClient}>
    <>
        <Routes>
            <Route index element={<Home />} />
            <Route path="inventory" element={<InventoryList />} />
            <Route path="itemDetail/:itemId" element={<ItemDetail />} />
        </Routes>


    </>
      </QueryClientProvider>
  ) }</MantineProvider>;
}

export default App