import { MantineProvider, Box } from "@mantine/core";
import {
  createBrowserRouter,
  RouterProvider,
  // useLoaderData,
} from "react-router-dom";

import { CustomFonts } from './CustomFonts';
import { KartaPage } from "./KartaPage";
import { TripPage } from "./TripPage";
import { Landing } from "./Landing";
import { Article } from "./Article";

const router = createBrowserRouter([
  {
    path: "/",
    element: <KartaPage />,
  },
  {
    path: "/about",
    element: <Landing />,
  },
  {
    path: "/trips/prishvin",
    element: <TripPage />,
  },
  {
    path: "/article/:id",
    element: <Article />,
    loader: async ({ params }) => {
      return fetch(
        `https://strapi.litmusmap.ru/api/articles?populate=*&filters[id][$eq]=${params.id}`
      );
    },
  },
]);

function App() {
  return (
    <MantineProvider theme={{
      fontFamily: 'Akrobat, Greycliff CF, Roboto, sans-serif',
      colorScheme: 'light'
    }}>
      <CustomFonts />
      <Box pos={"absolute"} w={"100%"} top={0}>
        <RouterProvider router={router} />
      </Box>
    </MantineProvider>
  );
}

export default App;
