import React from 'react';
import Stepper from './Stepper';

const PengajuanTempo = () => {
  const [currentStep, setCurrentStep] = React.useState(0);
  const NUMBER_OF_STEPS = 6;
  const stepDivs = [
    <div>Informasi Perusahaan</div>,
    <div>Kontak Person</div>,
    <div>Pengiriman</div>,
    <div>Referensi</div>,
    <div>Dokumen</div>,
    <div>Konfirmasi</div>,
  ];

  const goToNextStep = () =>
    setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev + 1));

  const goToPreviousStep = () =>
    setCurrentStep((prev) => (prev <= 0 ? prev : prev - 1));

  return (
    <>
      <div className='container flex flex-col items-center '>
        <h1 className='text-h-sm md:text-title-sm font-semibold text-center mb-6'>
          Form Pengajuan Tempo
        </h1>
        <p className='text-center mb-4'>
          Lorem ipsum dolor sit amet consectetur. Commodo suspendisse at enim
          magnis ut quisque rhoncus. Felis volutpat fringilla sollicitudin
          ultricies. Enim non eget in lorem netus. Nisl pharetra accumsan diam
          suspendisse.
        </p>
      </div>
      <div className='h-[2px] w-full mb-20 bg-gray_r-3' />
      <div className='container mt-10 flex flex-col items-center '>
        <Stepper currentStep={currentStep} numberOfSteps={NUMBER_OF_STEPS} />
        <div>{stepDivs[currentStep]}</div>
        <section className='flex gap-10 mt-10'>
          <button
            onClick={goToPreviousStep}
            className='bg-blue-600 text-white p-2 rounded-md'
            disabled={currentStep === 0} // Disable if on the first step
          >
            Previous step
          </button>
          <button
            onClick={goToNextStep}
            className='bg-blue-600 text-white p-2 rounded-md'
            disabled={currentStep === NUMBER_OF_STEPS - 1} // Disable if on the last step
          >
            Next step
          </button>
        </section>
      </div>
    </>
  );
};

export default PengajuanTempo;