'use client';

import React, { createContext, useContext, useMemo, ReactNode } from 'react';
import { FeatureFlagContextType, MockFeatureFlagService, mockFeatureFlags } from './FeatureFlagService';

const FeatureFlagContext = createContext<FeatureFlagContextType>(mockFeatureFlags);

interface FeatureFlagProviderProps {
  children: ReactNode;
  flags?: string[];
}

/**
 * Provider for feature flags on the client side
 * Can be initialized with specific flags or defaults to mock implementation
 */
export function FeatureFlagProvider({ children, flags }: FeatureFlagProviderProps) {
  const service = useMemo(() => {
    if (flags) {
      return new MockFeatureFlagService(flags);
    }
    return mockFeatureFlags;
  }, [flags]);

  return (
    <FeatureFlagContext.Provider value={service}>
      {children}
    </FeatureFlagContext.Provider>
  );
}

/**
 * Hook to access feature flags in client components
 */
export function useFeatureFlags(): FeatureFlagContextType {
  const context = useContext(FeatureFlagContext);
  if (!context) {
    throw new Error('useFeatureFlags must be used within a FeatureFlagProvider');
  }
  return context;
}

/**
 * Hook to check if a specific feature is enabled
 */
export function useFeatureFlag(flag: string): boolean {
  const { isEnabled } = useFeatureFlags();
  return isEnabled(flag);
}