booknow.js

import React, {useState, useRef} from 'react';
import Head from "next/head";
import Stepper from "@/components/Booking/Stepper";
import StepperControl from "@/components/Booking/StepperControl";
import Services from "@/components/Booking/steps/Services";
import Schedule from "@/components/Booking/steps/Schedule";
import Contact from "@/components/Booking/steps/Contact";
import Confirm from "@/components/Booking/steps/Confirm";
import {StepperContext} from "@/contexts/StepperContext";
import LocationNew from "@/components/Booking/steps/LocationNew";
import Location from "@/components/Booking/steps/Location";

const BookNow = () => {
    const [currentStep, setCurrentStep] = useState(1);
    const steps = [
        "Location",
        "Services",
        "Schedule",
        "Contact",
        "Confirm"
    ];

    const displayStep = (step) => {
        switch (step) {
            case 1:
                return <LocationNew />;
            case 2:
                return <Services />;
            case 3:
                return <Schedule />;
            case 4:
                return <Contact />;
            case 5:
                return <Confirm />;
            default:
                return <Location />;

        }
    }
    const handleClick = (direction) => {
        let newStep = currentStep;
        direction === "next" ? newStep++ : newStep--;
        newStep > 0 && newStep <= steps.length && setCurrentStep(newStep);
    }
    return (
        <>
            <Head>
                <title>Book a Shoot </title>
            </Head>

            <div className={`bg-[#F5F5F5]`}>
                <div className="container py-13">
                    <h1 className={`font-unbounded font-semibold lg:text-title-xxl text-title-md3 text-black text-center mb-10`}>
                        <span className={'text-radical-red-500'}>Book </span> a Shoot</h1>

                    <div className="bg-white px-[30px] lg:px-[100px] py-13.5">

                        {/*<Step />*/}
                        <Stepper steps={steps} currentStep={currentStep} />

                        <div className={`mt-14`}>
                            <StepperContext.Provider value={{}}>
                                {displayStep(currentStep)}
                            </StepperContext.Provider>
                        </div>

                        <StepperControl
                        handleClick={handleClick}
                        currentStep={currentStep}
                        steps={steps}
                        />

                    </div>
                </div>
            </div>
        </>
    );
};

export default BookNow;