// 'use client'; // Add this to enable client-side rendering
// import ContentAnimation from '@/components/layouts/content-animation';
// import Footer from '@/components/layouts/footer';
// import Header from '@/components/layouts/header';
// import MainContainer from '@/components/layouts/main-container';
// import Overlay from '@/components/layouts/overlay';
// import ScrollToTop from '@/components/layouts/scroll-to-top';
// import Setting from '@/components/layouts/setting';
// import Sidebar from '@/components/layouts/sidebar';
// import Portals from '@/components/portals';

// export default function DefaultLayout({ children }: { children: React.ReactNode }) {
//   return (
//     <>
//       {/* BEGIN MAIN CONTAINER */}
//       <div className="relative">
//         <Overlay />
//         <ScrollToTop />

//         {/* BEGIN APP SETTING LAUNCHER */}
//         <Setting />
//         {/* END APP SETTING LAUNCHER */}
//         <MainContainer>
//           {/* BEGIN SIDEBAR */}
//           <Sidebar />
//           {/* END SIDEBAR */}
//           <div className="main-content flex min-h-screen flex-col">
//             {/* BEGIN TOP NAVBAR */}
//             <Header />
//             {/* END TOP NAVBAR */}

//             {/* BEGIN CONTENT AREA */}
//             <ContentAnimation>{children}</ContentAnimation>
//             {/* END CONTENT AREA */}

//             {/* BEGIN FOOTER */}
//             <Footer />
//             {/* END FOOTER */}
//             <Portals />
//           </div>
//         </MainContainer>
//       </div>
//     </>
//   );
// }

'use client';

import React from 'react';
import ContentAnimation from '@/components/layouts/content-animation';
import Footer from '@/components/layouts/footer';
import Header from '@/components/layouts/header';
import MainContainer from '@/components/layouts/main-container';
import Overlay from '@/components/layouts/overlay';
import ScrollToTop from '@/components/layouts/scroll-to-top';
import Setting from '@/components/layouts/setting';
import Sidebar from '@/components/layouts/sidebar';
import Portals from '@/components/portals';
import { SubscriptionProvider } from '@/components/billing/subscription-context';

export default function DefaultLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {/* BEGIN MAIN CONTAINER */}
      <div className="relative">
        <Overlay />
        <ScrollToTop />

        {/* BEGIN APP SETTING LAUNCHER */}
        {/* <Setting /> */}
        {/* END APP SETTING LAUNCHER */}

        <MainContainer>
          {/* BEGIN SIDEBAR */}
          <Sidebar />
          {/* END SIDEBAR */}

          <div className="main-content flex min-h-screen flex-col">
            {/* BEGIN TOP NAVBAR */}
            <Header />
            {/* END TOP NAVBAR */}

            {/* BEGIN CONTENT AREA (wrapped with SubscriptionProvider) */}
            <SubscriptionProvider>
              <ContentAnimation>{children}</ContentAnimation>
            </SubscriptionProvider>
            {/* END CONTENT AREA */}

            {/* BEGIN FOOTER */}
            <Footer />
            {/* END FOOTER */}
            <Portals />
          </div>
        </MainContainer>
      </div>
    </>
  );
}