import React, { lazy, Suspense } from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router';
import { Navigate } from 'react-router';
const Details = lazy(() => import('./Details'));
const List = lazy(() => import('./List'));

const books = [
  {
    id: 1,
    title: 'JavaScript - das umfassende Handbuch',
    author: 'Philip Ackermann',
    isbn: '978-3836286299',
    rating: 5,
  },
  {
    id: 2,
    title: 'Clean Code',
    author: 'Robert Martin',
    isbn: '978-0132350884',
    rating: 4,
  },
  {
    id: 3,
    title: 'Design Patterns',
    author: 'Erich Gamma',
    isbn: '978-0201633610',
    rating: 5,
  },
];

const router = createBrowserRouter([
  {
    path: '/list',
    element: (
      <Suspense fallback={<div>Lade Liste…</div>}>
        <List books={books} />
      </Suspense>
    ),
  },
  {
    path: '/details/:id',
    element: (
      <Suspense fallback={<div>Lade Details…</div>}>
        <Details books={books} />
      </Suspense>
    ),
  },

  { path: '/', element: <Navigate to="/list" /> },
]);

const App: React.FC = () => {
  return <RouterProvider router={router}></RouterProvider>;
};

export default App;

