import React from "react";
import { Box } from "../Box";
import { Panel } from "../Panel";
import { Button, BUTTON_VARIANT } from "../Button";
import { useStep } from "../../hooks/useStep";

export const ExampleSetupWizard = ({
  steps,
  initialStep,
}: {
  steps: number;
  initialStep?: number;
}) => {
  const { step, goToNextStep, goToPreviousStep, goToStep } = useStep({
    steps,
    initialStep,
  });

  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>
  );
};