import React from "react";
import { Story, Meta } from "@storybook/react/types-6-0";

import { ThemeProvider } from "../ThemeProvider";
import ProgressSteps, { ProgressStepsProps } from "./ProgressSteps";

import NumberedStep from "./NumberedStep";
import Button from "../button/Button";

export default {
  title: "Components/Content/ProgressSteps",
  component: ProgressSteps,
} as Meta;

const Template: Story<ProgressStepsProps> = (args) => {
  const [current, setCurrent] = React.useState(args.current);
  return (
    <ThemeProvider>
      <ProgressSteps {...args} current={current}>
        <NumberedStep title="Progress Steppper">
          <p>Welcome to the stepper</p>
          <Button size="compact" onClick={() => setCurrent(1)}>
            Next
          </Button>
        </NumberedStep>
        <NumberedStep title="Verify Address">
          <p>Address on file: Europalaan 400</p>
          <Button size="compact" onClick={() => setCurrent(2)}>
            Next
          </Button>
        </NumberedStep>
      </ProgressSteps>
    </ThemeProvider>
  );
};

export const Default = Template.bind({});
Default.args = {
  current: 0,
};