import React, { createContext, useContext, ReactNode } from 'react';

export interface SuggestionsContextValue {
  onOfferClicked: (offerId: string, targetUrl?: string) => void;
}

const SuggestionsContext = createContext<SuggestionsContextValue | null>(null);

export interface SuggestionsProviderProps {
  children: ReactNode;
  onOfferClicked: (offerId: string, targetUrl?: string) => void;
}

export const SuggestionsProvider: React.FC<SuggestionsProviderProps> = ({
  children,
  onOfferClicked,
}) => {
  return (
    <SuggestionsContext.Provider value={{ onOfferClicked }}>
      {children}
    </SuggestionsContext.Provider>
  );
};

export const useSuggestionsContext = (): SuggestionsContextValue => {
  const context = useContext(SuggestionsContext);
  if (!context) {
    throw new Error(
      'useSuggestionsContext must be used within a SuggestionsProvider. ' +
        'Make sure SuggestionCtaWrapper is used inside the Suggestions component.',
    );
  }
  return context;
};