import React, { FunctionComponent } from "react";

import { createHashRouter, RouterProvider } from "react-router-dom";
import { Layout } from "./components/Layout/Layout";

import { HomePage } from "./pages/HomePage/HomePage";
import { ScreenSharingPage } from "./pages/ScreenSharingPage/ScreenSharingPage";

const router = createHashRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "",
        element: <HomePage />,
      },
      {
        path: "/screen-sharing",
        element: <ScreenSharingPage />,
        children: [
          {
            path: "sessions/:sessionId",
            element: <ScreenSharingPage />,
          },
        ],
      },
    ],
  },
]);

export const App: FunctionComponent = () => {
  return <RouterProvider router={router} />;
};

export default App;