import { useEffect } from "react";
import { useAuth } from "@/hooks/use-auth";
import { useToast } from "@/hooks/use-toast";
import { DashboardSkeleton } from "@/components/DashboardSkeleton";
interface ProtectedRouteProps {
children: React.ReactNode;
}
export function ProtectedRoute({ children }: ProtectedRouteProps) {
const { isLoading, isAuthenticated } = useAuth();
const { toast } = useToast();
useEffect(() => {
if (!isLoading && !isAuthenticated) {
toast({
title: "Authentication Required",
description: "Please sign in to access this page.",
variant: "destructive",
});
setTimeout(() => {
window.location.href = "/api/login";
}, 500);
}
}, [isLoading, isAuthenticated, toast]);
if (isLoading) {
return <DashboardSkeleton />;
}
if (!isAuthenticated) {
return <DashboardSkeleton />;
}
return <>{children}</>;
}