import type { ReactNode } from "react";
import { Navigate } from "react-router-dom";

import { useAuth } from "@/auth/useAuth";
import { hasPermission } from "@/lib/permissions";

interface RequirePermissionProps {
  /** Permission key(s); access is granted if the user has ANY of them. */
  permission: string | string[];
  /** Where to send users who lack the permission. */
  redirectTo?: string;
  children: ReactNode;
}

/**
 * Page-level guard: renders children only when the current user holds one of
 * the given permissions, otherwise redirects (default: overview).
 */
export function RequirePermission({
  permission,
  redirectTo = "/dashboard/overview",
  children,
}: RequirePermissionProps) {
  const { user } = useAuth();
  const keys = Array.isArray(permission) ? permission : [permission];
  const allowed = keys.some((key) => hasPermission(user, key));

  if (!allowed) return <Navigate to={redirectTo} replace />;
  return <>{children}</>;
}