import type { ReactNode } from 'react'
import { usePermission } from '@/features/auth/hooks/usePermission'

interface CanPerformProps {
  /** Permission code or array of codes (OR: at least one must match). */
  permission: string | string[]
  /** Rendered when user lacks the permission. Defaults to null. */
  fallback?: ReactNode
  children: ReactNode
}

/**
 * Renders children if the authenticated user has the required permission(s).
 * When permission is an array, OR semantics apply — one match is sufficient.
 * Renders fallback (or null) otherwise.
 */
export function CanPerform({ permission, fallback = null, children }: CanPerformProps) {
  return usePermission(permission) ? <>{children}</> : <>{fallback}</>
}
