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

export interface FABConfig {
  icon?: ReactNode;
  label: string;
  onClick: () => void;
  visible?: boolean;
  variant?: 'primary' | 'secondary';
}

interface FABContextType {
  config: FABConfig | null;
  setFAB: (config: FABConfig | null) => void;
  clearFAB: () => void;
}

const FABContext = createContext<FABContextType | undefined>(undefined);

export function FABProvider({ children }: { children: ReactNode }) {
  const [config, setConfig] = useState<FABConfig | null>(null);

  const setFAB = useCallback((newConfig: FABConfig | null) => {
    setConfig(newConfig);
  }, []);

  const clearFAB = useCallback(() => {
    setConfig(null);
  }, []);

  const value = useMemo(() => ({ config, setFAB, clearFAB }), [config, setFAB, clearFAB]);

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

export function useFAB() {
  const context = useContext(FABContext);
  if (!context) {
    throw new Error('useFAB must be used within FABProvider');
  }
  return context;
}
