import { SignedIn, SignedOut } from "@clerk/clerk-react";
import { Navigate } from "react-router-dom";
import { ROUTES } from "@/router/routes";

interface ProtectedRouteProps {
  children: React.ReactNode;
  fallback?: string;
}

/**
 * ProtectedRoute component that uses Clerk to protect routes.
 * Redirects to auth page if user is not signed in.
 */
export function ProtectedRoute({ children, fallback = ROUTES.AUTH }: ProtectedRouteProps) {
  return (
    <>
      <SignedIn>{children}</SignedIn>
      <SignedOut>
        <Navigate to={fallback} replace />
      </SignedOut>
    </>
  );
}

