import { _ as __assign } from '../tslib.es6-faad35dc.js';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import MuiBox from '@mui/material/Box';
import Button from '../components/Button.js';
import Typography from '../components/Typography.js';
import StepperHorizontal from '../components/StepperHorizontal.js';
import '../clsx.m-6243b874.js';
import '@mui/material/styles';
import '@mui/material/Button';
import '../theme/colors.js';
import '../_commonjsHelpers-1789f0cf.js';
import '@mui/material/Typography';
import '../theme/typography.js';

var argTypes = {
    steps: { table: { disable: true } },
    activeStep: { table: { disable: true } }
};
var Template = function (args) {
    var _a = useState(0), activeStep = _a[0], setActiveStep = _a[1];
    var steps = ["Step 1", "Step 2", "Step 3"];
    var isDone = activeStep === steps.length;
    var handleNext = function () {
        setActiveStep(function (prevActiveStep) { return prevActiveStep + 1; });
    };
    var handleBack = function () {
        setActiveStep(function (prevActiveStep) { return prevActiveStep - 1; });
    };
    var handleReset = function () {
        setActiveStep(0);
    };
    return (jsxs(Fragment, { children: [jsx(StepperHorizontal, { activeStep: activeStep, steps: steps }, void 0), activeStep !== steps.length && (jsxs(MuiBox, { children: [jsx(Button, __assign({ color: "secondary", size: "sm", disabled: activeStep === 0, onClick: handleBack }, { children: "Back" }), void 0), jsx(Button, __assign({ color: "primary", size: "sm", variant: "contained", onClick: handleNext }, { children: activeStep === steps.length - 1 ? "Finish" : "Next" }), void 0)] }, void 0)), isDone && (jsxs(MuiBox, { children: [jsx(Typography, __assign({ variant: "descriptionBold" }, { children: "All steps completed - you're finished" }), void 0), jsx(Button, __assign({ onClick: handleReset, size: "sm" }, { children: "Reset" }), void 0)] }, void 0))] }, void 0));
};
var Default = Template.bind({});
var StepperHorizontal_stories = {
    title: "Components/StepperHorizontal",
    component: StepperHorizontal,
    argTypes: argTypes
};

export { Default, StepperHorizontal_stories as default };
