import React from 'react';
import { useSubscription } from '@/contexts/SubscriptionContext';
import { SubscriptionFeatureFlag } from '@/types/subscription';
import { Paywall } from './Paywall';

export interface FeatureGateProps {
  children: React.ReactNode;
  feature: SubscriptionFeatureFlag | SubscriptionFeatureFlag[];
  fallback?: React.ReactNode;
  showPaywall?: boolean;
  paywallTitle?: string;
  paywallDescription?: string;
  requiredPlan?: 'basic' | 'professional' | 'enterprise';
}

/**
 * Component that conditionally renders children based on subscription features
 */
export const FeatureGate = ({
  children,
  feature,
  fallback = null,
  showPaywall = false,
  paywallTitle,
  paywallDescription,
  requiredPlan,
}: FeatureGateProps) => {
  const { canAccessFeature } = useSubscription();
  const features = Array.isArray(feature) ? feature : [feature];
  const hasAccess = features.every((f) => canAccessFeature(f));

  if (!hasAccess) {
    if (showPaywall) {
      return (
        <Paywall
          feature={feature}
          title={paywallTitle}
          description={paywallDescription}
          requiredPlan={requiredPlan}
        />
      );
    }
    return <>{fallback}</>;
  }

  return <>{children}</>;
};