import {
  Box,
  Step,
  StepDescription,
  StepIcon,
  StepIndicator,
  StepNumber,
  StepSeparator,
  StepStatus,
  StepTitle,
  Stepper,
  useSteps,
} from '@chakra-ui/react';
import Image from 'next/image';

const StepApproval = ({ layer, status }) => {
  const steps = [
    { title: 'Indoteknik', description: 'Contact Info', layer_approval: 1 },
    { title: 'Manager', description: 'Date & Time', layer_approval: 2 },
    { title: 'Director', description: 'Select Rooms', layer_approval: 3 },
  ];
  const { activeStep } = useSteps({
    index: layer,
    count: steps.length,
  });
  return (
    <Stepper size='md' index={layer} colorScheme='green'>
      {steps.map((step, index) => (
        <Step key={index}>
          <StepIndicator>
            { layer === step.layer_approval && status === 'cancel' ? (
              <StepStatus
                complete={
                  <Image
                    src='/images/remove.png'
                    width={20}
                    height={20}
                    alt=''
                    className='w-full'
                  />
                }
                incomplete={<StepNumber />}
                active={<StepNumber />}
              />
            ) : (
              <StepStatus
                complete={<StepIcon />}
                incomplete={<StepNumber />}
                active={<StepNumber />}
              />
            )}
          </StepIndicator>

          <Box flexShrink='0'>
            <StepTitle className='md:text-xs'>{step.title}</StepTitle>
            <StepDescription className='md:text-[8px]'>{step.description}</StepDescription>
          </Box>
        </Step>
      ))}
    </Stepper>
  );
};

export default StepApproval;
