import React, { createContext, useContext, useRef, useCallback } from 'react';
import ClickSpark from '../components/reactbits/Animations/ClickSpark/ClickSpark';

const ClickSparkContext = createContext(null);

export const ClickSparkProvider = ({ children }) => {
  const clickSparkRef = useRef(null);

  const addSpark = useCallback((x, y) => {
    if (clickSparkRef.current) {
      clickSparkRef.current.addSpark(x, y);
    }
  }, []);

  React.useEffect(() => {
    const handleClick = (e) => {
      addSpark(e.clientX, e.clientY);
    };

    document.addEventListener('click', handleClick);
    return () => document.removeEventListener('click', handleClick);
  }, [addSpark]);

  return (
    <ClickSparkContext.Provider value={{ addSpark }}>
      <ClickSpark
        ref={clickSparkRef}
        sparkColor="#FFA500"
        sparkSize={10}
        sparkRadius={15}
        sparkCount={8}
        duration={400}
        easing="cubic-bezier(0.4, 0, 0.2, 1)"
        extraScale={1.0}
      >
        {children}
      </ClickSpark>
    </ClickSparkContext.Provider>
  );
};

export const useClickSpark = () => {
  const context = useContext(ClickSparkContext);
  if (!context) {
    throw new Error('useClickSpark должен использоваться внутри ClickSparkProvider');
  }
  return context;
}; 