src/app/recruitment/layout.tsx

// app/recruitment/layout.tsx
"use client"
import { Header } from '@/components/dashboard/header';
import { HeaderMenu } from '@/components/dashboard/header-menu';
import { useAuth } from '@/composables/useAuth';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

// Loading Component
function AuthLoadingScreen() {
  return (
    <div className="flex h-screen w-full items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100">
      <div className="text-center space-y-6">
        {/* Spinner */}
        <div className="relative mx-auto w-20 h-20">
          <div className="absolute inset-0 rounded-full border-4 border-blue-200"></div>
          <div className="absolute inset-0 rounded-full border-4 border-transparent border-t-blue-600 animate-spin"></div>
        </div>
        
        {/* Text */}
        <div className="space-y-2">
          <h2 className="text-xl font-semibold text-gray-800">
            Loading...
          </h2>
          <p className="text-sm text-gray-500">
            Please wait while we verify your credentials
          </p>
        </div>
        
        {/* Dots animation */}
        <div className="flex justify-center gap-2">
          <div className="w-2 h-2 bg-blue-600 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
          <div className="w-2 h-2 bg-blue-600 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
          <div className="w-2 h-2 bg-blue-600 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
        </div>
      </div>
    </div>
  );
}

export default function RecruitmentLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { isLoadingUser, isAuthenticated, logout } = useAuth();
  const router = useRouter();

  useEffect(() => {
    if (!isLoadingUser && !isAuthenticated) {
      router.replace("/login");
    }
  }, [isLoadingUser, isAuthenticated, router]);

  if (isLoadingUser) {
    return <AuthLoadingScreen />;
  }

  if (!isAuthenticated) {
    logout();
    return null;
  }

  return (
    <div className="flex h-screen bg-background">
      <div className="flex-1 flex flex-col overflow-hidden">
        <Header />
        <HeaderMenu />
        <main className="flex-1 overflow-auto">
          <div className="p-8 space-y-6">
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}