import React from "react";
import {
  Box,
  Step,
  StepDescription,
  StepIcon,
  StepIndicator,
  StepNumber,
  StepSeparator,
  StepStatus,
  StepTitle,
  Stepper,
  useSteps,
} from "@chakra-ui/react";

const steps = [
  { title: "Wallet policy", description: "Wallet policy" },
  { title: "Approval policy", description: "Approval policy" },
  { title: "Submission policy", description: "Submission policy" },
  { title: "Define budget", description: "Define budget" },
];

const CreateWallet = () => {
  const { activeStep } = useSteps({
    index: 1,
    count: steps.length,
  });
  return (
    <Box>
      <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>
    </Box>
  );
};

export default CreateWallet;
