import React, { ReactNode, useState } from "react";
import { HoveredStepContext } from "@/contexts/HoveredStepContext";

export const HoveredStepProvider: React.FC<{ children: ReactNode }> = ({
    children,
}) => {
    const [hoveredStep, setHoveredStepNumber] = useState<number | null>(null);

    const setHoveredStep = (stepNumber: number | null) => {
        setHoveredStepNumber(stepNumber);
    };

    const resetHoveredStep = () => {
        setHoveredStepNumber(null);
    };

    return (
        <HoveredStepContext.Provider
            value={{
                hoveredStep,
                setHoveredStep,
                resetHoveredStep,
            }}>
            {children}
        </HoveredStepContext.Provider>
    );
};