'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useSession } from '@/providers/auth-provider';
import { ScreenLoader } from '@/components/common/screen-loader';

import { Demo4Layout } from '../components/layouts/demo4/layout';

export default function ProtectedLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { data: sessionData, status } = useSession();
  const router = useRouter();
  const session = sessionData?.user ? true : false;

  useEffect(() => {
    // Only redirect if we're sure authentication has failed (not during loading)
    if (status === 'unauthenticated') {
      router.push('/signin');
    }
  }, [status, router]);

  // Show loading state while checking authentication
  if (status === 'loading') {
    return <ScreenLoader />;
  }

  // Only render the layout if authenticated
  return session ? <Demo4Layout>{children}</Demo4Layout> : <ScreenLoader />;
}