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";
import EditItem from "./features/inventory/EditItem.tsx";
import {BarkHeader} from "./common/components/BarkHeader.tsx";
import AddItem from "./features/inventory/AddItem.tsx";
import { Notifications } from '@mantine/notifications';
import '@mantine/notifications/styles.css';

// 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}>
            <>

                <BarkHeader></BarkHeader>
                <Notifications />
                <Routes>
                    <Route index element={<Home/>}/>
                    <Route path="inventory" element={<InventoryList/>}/>
                    <Route path="inventory/itemDetail/:itemId" element={<ItemDetail/>}/>
                    <Route path="inventory/editItem/:itemId" element={<EditItem/>}/>
                    <Route path="inventory/addItem" element={<AddItem/>}/>
                </Routes>
            </>
        </QueryClientProvider>
    )}</MantineProvider>;
}

export default App