import { Suspense } from 'react';
import { Route, Routes } from 'react-router-dom';
import UserRoutes from './UserRoutes';
import PublicRoutes from './PublicRoutes';
import ScrollToTop from '../components/common/ScrollToTop';
import { SkeletonPage } from "../components/common/Skeleton";

const RouteFallback = () => (
  <SkeletonPage />
);

const AppRoutes = () => {
    return (
      <>

      <ScrollToTop />
        {/* Wrap UserRoutes inside AuthProvider separately */}
        <Suspense fallback={<RouteFallback />}>
          <Routes>
            {UserRoutes()}
            {PublicRoutes()}
          </Routes>
        </Suspense>
      </>
    );
};

export default AppRoutes;
