import { type ReactNode } from 'react';
import Stack from '@material-hu/mui/Stack';
import Spinner from '@material-hu/components/design-system/Spinner';
import { useAuth } from './AuthProvider';
import { UnauthenticatedPage } from '../pages/Unauthenticated';

interface ProtectedRouteProps {
  children: ReactNode;
}

export function ProtectedRoute({ children }: ProtectedRouteProps) {
  const { user, isLoading } = useAuth();

  if (isLoading) {
    return (
      <Stack sx={{ justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
        <Spinner />
      </Stack>
    );
  }
  if (!user) return <UnauthenticatedPage />;

  return <>{children}</>;
}
