import type { ReactNode } from 'react'
import { useFeature } from '@/hooks/useFeature'
import { UpgradePrompt } from './UpgradePrompt'

interface FeatureGateProps {
  /** Feature flag key (e.g. `psa_integration`). Must match a backend `feature_flags.flag_key`. */
  feature: string
  /**
   * Rendered when the feature is enabled for the current account.
   */
  children: ReactNode
  /**
   * Rendered when the feature is disabled. Defaults to `<UpgradePrompt feature={feature} />`.
   * Pass `null` to render nothing.
   */
  fallback?: ReactNode
}

/**
 * Conditionally renders `children` based on whether `feature` is enabled
 * for the current account.
 *
 * This is a UX affordance — the security boundary is the backend
 * `require_feature` dependency. Never trust this gate for authorization.
 */
export function FeatureGate({ feature, children, fallback }: FeatureGateProps) {
  const enabled = useFeature(feature)

  if (enabled) {
    return <>{children}</>
  }

  // Use explicit fallback when provided, otherwise render the standard prompt.
  // `null` is a valid fallback (renders nothing).
  if (fallback !== undefined) {
    return <>{fallback}</>
  }

  return <UpgradePrompt feature={feature} />
}

export default FeatureGate