front-AT/app/Components/Global/StepNavigator/StepNavigator.tsx

"use client";

import { useState, ReactNode } from "react";
import "./StepNavigator.css";

interface StepNavigatorProps {
  totalSteps: number;
  children: ReactNode[];
  onFinish?: () => void;
}

export default function StepNavigator({
  totalSteps,
  children,
  onFinish,
}: StepNavigatorProps) {
  const [step, setStep] = useState(1);

  const handleNext = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    if (step < totalSteps) setStep(step + 1);
    else if (onFinish) onFinish();
  };

  const handlePrev = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    if (step > 1) setStep(step - 1);
  };

  return (
    <section className="stepNavigator">
      {children[step - 1]}

      <div className="absoluteButton">
        {step > 1 && (
          <button onClick={handlePrev} className="button buttonSearch">
            Atrás
          </button>
        )}

        {step < totalSteps && (
          <button onClick={handleNext} className="button buttonSearch">
            Siguiente
          </button>
        )}
      </div>
    </section>
  );
}