import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter } from "react-router";
import { RouterProvider } from "react-router/dom";
import { createTheme, MantineProvider, Input } from "@mantine/core";

import "@mantine/core/styles.css";

import { SubsList, subsListLoader } from "./SubsList";
import { SubOrders, subOrdersLoader } from "./SubOrders";

const theme = createTheme({
  components: {
    InputWrapper: Input.Wrapper.extend({
      defaultProps: {
        inputWrapperOrder: ["label", "input", "description", "error"],
        my: "md",
      },
    }),
  },
});

const router = createBrowserRouter([
  {
    path: "dashboard",
    Component: SubsList,
    loader: subsListLoader,
  },
  {
    path: "dashboard/subs/:username",
    Component: SubOrders,
    loader: subOrdersLoader,
  },
]);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <MantineProvider theme={theme}>
      <RouterProvider router={router} />
    </MantineProvider>
  </React.StrictMode>
);