Untitled

import React from 'react';
import OwnerInformationForm from './Form_Vari/Owner_Information'; // Importa il modulo Owner Information
import PetInformationForm from './Form_Vari/Pet_Information';
import ClinicInformationForm from './Form_Vari/Clinic_Information';

interface FormDatiProps {
  currentStep: number;
  setCurrentStep: React.Dispatch<React.SetStateAction<number>>;
}

const FormDati: React.FC<FormDatiProps> = ({ currentStep, setCurrentStep }) => {
  const handleNextStep = (e: React.FormEvent) => {
    e.preventDefault();
    setCurrentStep(Math.min(4, currentStep + 1)); // Aggiungi il passo finale
  };

  const handleBackStep = (e: React.FormEvent) => {
    e.preventDefault();
    if (currentStep > 1) {
      setCurrentStep(currentStep - 1); // Torna al passo precedente
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    alert("Dati inviati!"); // Funzione di invio
  };

  return (
    <div>
      {/* Mostra il modulo in base al passo corrente */}
      {currentStep === 1 && <OwnerInformationForm />}
      {currentStep === 2 && <PetInformationForm />}
      {currentStep === 3 && <ClinicInformationForm />}
      {/* Qui puoi aggiungere altri componenti come PetInformationForm per altri passi */}

      {/* Bottoni per navigare tra i passi */}
      <div className="mt-6 flex justify-end gap-4 w-full">
        {/* Bottone Back */}
        {currentStep > 1 && (
          <button
            onClick={handleBackStep}
            className="px-12 py-2 bg-gray-300 rounded-lg hover:bg-gray-400 text-sm shadow-lg"
          >
            Back
          </button>
        )}

        {/* Bottone Next */}
        {currentStep < 4 && (
          <button
            onClick={handleNextStep}
            className="px-12 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 text-sm shadow-lg"
          >
            Next
          </button>
        )}

        {/* Bottone Invia quando siamo all'ultimo passo */}
        {currentStep === 4 && (
          <button
            onClick={handleSubmit}
            className="px-12 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 text-sm shadow-lg"
          >
            Invia
          </button>
        )}
      </div>
    </div>
  );
};

export default FormDati;