import React from 'react';
import useDevice from '@/core/hooks/useDevice';
const Stepper = ({ currentStep, numberOfSteps }) => {
  const { isDesktop, isMobile } = useDevice();
  const stepLabels = [
    'Informasi Perusahaan',
    'Kontak Person',
    'Pengiriman',
    'Referensi',
    'Dokumen',
    'Konfirmasi',
  ];
  const activeColor = (index) =>
    currentStep >= index ? 'bg-red-500' : 'bg-gray-300';
  const activeColorBullet = (index) =>
    currentStep >= index ? 'bg-red-500 ' : 'bg-white border-gray-300 border';
  const isFinalStep = (index) => index === numberOfSteps - 1;
  const isFirstStep = (index) => index === 0;
  return (
    <div className='flex items-center'>
      {Array.from({ length: numberOfSteps }).map((_, index) => (
        <React.Fragment key={index}>
          {isFirstStep(index) ? null : (
            <div
              className={`${isMobile ? 'w-12' : 'w-48'} h-[1px] ${activeColor(
                index
              )}`}
            ></div>
          )}
          <div
            className={`w-6 h-6 ${
              currentStep == index
                ? 'border-red-500 border'
                : `${activeColorBullet(index)} `
            }  rounded-full flex justify-center items-center text-nowrap`}
          >
            <div className='relative text-xs'>
              <div
                className={`absolute z-10  ${
                  isMobile
                    ? `w-12 h-full top-4 ${
                        isFinalStep(index) ? '-left-16' : '-left-4'
                      }`
                    : 'w-48 h-full -top-14 -left-24'
                }  `}
              >
                <div
                  className={`relative w-full max-w-md p-2 text-center ${
                    currentStep == index
                      ? 'text-red-500'
                      : `${isMobile ? 'hidden' : ''}`
                  }  text-nowrap`}
                >
                  {stepLabels[index]}
                </div>
              </div>
            </div>
          </div>
        </React.Fragment>
      ))}
    </div>
  );
};

export default Stepper;