import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { Notifications } from './components/Notifications';
import { Home } from './pages/Home';
import { MainLayout } from './pages/MainLayout';
import { NewScheme } from './pages/NewScheme';
import { SchemeDetail } from './pages/SchemeDetail';
import { SchemeNotFound } from './pages/SchemeNotFound';
import { Schemes } from './pages/Schemes';

const routes = createBrowserRouter([
  {
    path: '/',
    element: <MainLayout />,
    children: [
      { index: true, element: <Home /> },
      {
        path: 'schemes',
        element: <Schemes />,
        children: [
          { path: 'new', element: <NewScheme /> },
          { path: 'not-found', element: <SchemeNotFound /> },
          { path: ':id', element: <SchemeDetail /> },
        ],
      },
    ],
  },
]);

export function App() {
  return (
    <Notifications>
      <title>Color Lab</title>
      <RouterProvider router={routes}></RouterProvider>
    </Notifications>
  );
}