import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
import { ExampleSetupWizard } from "./ExampleSetupWizard";

<Meta title="Hooks/useStep" component={ExampleSetupWizard} />

# useStep

<Preview>
  <Story name="useStep">
    <ExampleSetupWizard steps={4} />
  </Story>
</Preview>

## Props

<Props of={ExampleSetupWizard} />

## Example

This code snippet is from the `ExampleSetupWizard` from above.

To see an example within a modal, look at the [modal story](/?path=/docs/components-modal--default#set-up-wizard-example).

```jsx
export const ExampleSetupWizard = () => {
  const { step, goToNextStep, goToPreviousStep, goToStep } = useStep({
    steps: 4,
    initialStep: 2,
  });

  return (
    <Box>
      <Panel className="p-8">
        {step === 1 && <>Step 1</>}
        {step === 2 && <>Step 2</>}
        {step === 3 && <>Step 3</>}
        {step === 4 && <>Step 4</>}
      </Panel>

      <Button.Group className="mt-4 justify-end">
        {step !== 1 && (
          <Button.Group className="mr-auto">
            <Button
              variant={BUTTON_VARIANT.SECONDARY}
              onClick={goToPreviousStep}
            >
              Previous Step
            </Button>
          </Button.Group>
        )}

        <Button
          variant={BUTTON_VARIANT.SECONDARY}
          onClick={() => {
            goToStep(1);
          }}
        >
          Cancel
        </Button>

        {step === 4 ? (
          <Button
            onClick={() => {
              console.log("Create button clicked");
            }}
          >
            Create
          </Button>
        ) : (
          <Button onClick={goToNextStep}>Next Step</Button>
        )}
      </Button.Group>
    </Box>
  );
};
```