"use client";

import type { ReactNode } from "react";
import { useHasPermission, type Permission } from "@/lib/permissions";

/**
 * Renders {@link children} only when the current user holds {@link permission}.
 * For action-level RBAC (buttons, menu entries). The server still enforces the
 * real check — this just hides controls the user can't use.
 *
 * @example
 * <Can permission="HandlePayments">
 *   <Button onClick={refund}>Refund</Button>
 * </Can>
 */
export function Can({
  permission,
  children,
  fallback = null,
}: {
  permission: Permission;
  children: ReactNode;
  fallback?: ReactNode;
}) {
  const allowed = useHasPermission(permission);
  return <>{allowed ? children : fallback}</>;
}
