import "@mantine/core/styles.css";
import "@mantine/notifications/styles.css";
import "./styles/roulette.css";
import "./styles/dropzone.css";
import { MantineProvider, createTheme } from "@mantine/core";
import { ModalsProvider } from "@mantine/modals";
import { Notifications } from "@mantine/notifications";
import { createRoot } from "react-dom/client";
import { AuthProvider } from "./auth";
import { Root } from "./Root";

const theme = createTheme({
  primaryColor: "blue",
  fontFamily: "system-ui, -apple-system, sans-serif",
});

createRoot(document.getElementById("root")!).render(
  <MantineProvider theme={theme} defaultColorScheme="dark">
    <ModalsProvider>
      <Notifications position="top-right" />
      <AuthProvider>
        <Root />
      </AuthProvider>
    </ModalsProvider>
  </MantineProvider>
);