import { Suspense, lazy, type ComponentType } from 'react'
import { createBrowserRouter, RouterProvider } from 'react-router'

import './App.css'

const Layout = lazy(() => import('./Layout.tsx'))
const HomePage = lazy(() => import('./pages/HomePage.tsx'))
const NotFoundPage = lazy(() => import('./pages/NotFoundPage.tsx'))

const renderLazyRoute = (Component: ComponentType) => (
  <Suspense fallback={<div>Loading...</div>}>
    <Component />
  </Suspense>
)

// routing configuration
const router = createBrowserRouter([
  {
    path: '/',
    element: renderLazyRoute(Layout),
    children: [
      { index: true, element: renderLazyRoute(HomePage) },
      { path: 'language', element: renderLazyRoute(HomePage) },
      { path: 'propertypool', element: renderLazyRoute(HomePage) },
      { path: 'product', element: renderLazyRoute(HomePage) },
      { path: '*', element: renderLazyRoute(NotFoundPage) },
    ],
  },
])

function App() {
    return <RouterProvider router={router} />
 }

export default App