import { createBrowserRouter } from 'react-router';
import { AppShell } from './components/layout/AppShell';
import { ApartmentListPage } from './pages/ApartmentListPage';
import { ApartmentDetailPage } from './pages/ApartmentDetailPage';
import { ApartmentFloorPlanPage } from './pages/ApartmentFloorPlanPage';
import { RoomEditorPage } from './pages/RoomEditorPage';

export const router = createBrowserRouter([
  {
    path: '/',
    element: <AppShell />,
    handle: { crumb: 'breadcrumb.apartments' },
    children: [
      {
        index: true,
        element: <ApartmentListPage />,
      },
      {
        path: 'apartments/:id',
        handle: { crumb: 'breadcrumb.apartmentDetails' },
        children: [
          {
            index: true,
            element: <ApartmentDetailPage />,
          },
          {
            path: 'floorplan',
            handle: { crumb: 'breadcrumb.floorPlan' },
            element: <ApartmentFloorPlanPage />,
          },
          {
            path: 'rooms/:roomId/editor',
            handle: { crumb: 'breadcrumb.roomEditor' },
            element: <RoomEditorPage />,
          },
        ],
      },
    ],
  },
]);
