import React from 'react'
import ReactDOM from 'react-dom/client'
import Router from './Router.tsx'
import '@mantine/core/styles.css';
import '@mantine/code-highlight/styles.css';
import '@mantine/dates/styles.css';
import '@mantine/tiptap/styles.css';
import {createTheme, DEFAULT_THEME, MantineProvider, mergeMantineTheme} from "@mantine/core";
import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
import {PocketBaseProvider} from "./lib/pocketbase.tsx";
import "./global.css";

// fonts
import "@fontsource/overpass"
import "@fontsource/fira-code"

const queryClient = new QueryClient()

const themeOverride = createTheme({
    fontFamilyMonospace: 'Fira Code VF, monospace',
    fontFamily: 'Overpass, sans-serif',
    headings: {
        fontFamily: 'Overpass, sans-serif'
    },
});
export const theme = mergeMantineTheme(DEFAULT_THEME, themeOverride);


ReactDOM.createRoot(document.getElementById('root')!).render(
    <MantineProvider theme={theme}>
        <QueryClientProvider client={queryClient}>
            <PocketBaseProvider>
                <React.StrictMode>
                    <Router/>
                </React.StrictMode>
            </PocketBaseProvider>
        </QueryClientProvider>
    </MantineProvider>
)