() => {
  const steps = [
    { title: "First", description: "Contact info" },
    { title: "Second", description: "Date & time" },
    { title: "Third", description: "Select rooms" },
  ];
  
  const { activeStep } = useSteps({
    index: 1,
    count: steps.length,
  });


  return (
    <div>
      <Stepper index={activeStep}>
        {steps.map((step, index) => (
          <Step key={index}>
            <StepIndicator>
              <StepStatus
                complete={<StepIcon />}
                incomplete={<StepNumber />}
                active={<StepNumber />}
              />
            </StepIndicator>

            <Box flexShrink="0">
              <StepTitle>{step.title}</StepTitle>
              <StepDescription>{step.description}</StepDescription>
            </Box>

            <StepSeparator />
          </Step>
        ))}
      </Stepper>
    </div>
  )
}