'use client';

import { ReactNode } from 'react';
import { useCapability } from '@/hooks/useCapability';

type CapabilityGateProps = {
  capabilityKey: string;
  children: ReactNode;
  fallback?: ReactNode;
  comingSoon?: ReactNode;
};

export function CapabilityGate({
  capabilityKey,
  children,
  fallback = null,
  comingSoon = null,
}: CapabilityGateProps) {
  const { isLoading, isError, capabilityState } = useCapability(capabilityKey);

  if (isLoading || isError || !capabilityState) {
    return <>{fallback}</>;
  }

  if (capabilityState === 'enabled') {
    return <>{children}</>;
  }

  if (capabilityState === 'coming_soon') {
    return <>{comingSoon ?? fallback}</>;
  }

  return <>{fallback}</>;
}