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 Skeleton from "../components/common/Skeleton";

const RouteFallback = () => (
  <div className="min-h-[60vh] flex items-center justify-center px-6">
    <div className="w-full max-w-3xl space-y-4">
      <Skeleton height={32} rounded={12} />
      <Skeleton height={220} rounded={16} />
      <Skeleton height={16} />
      <Skeleton height={16} width="80%" />
      <Skeleton height={16} width="60%" />
    </div>
  </div>
);

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

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

export default AppRoutes;
