// node modules
import React from "react";
import { Meta, Story } from "@storybook/react";

// local components
import { ProgressBar, ProgressBarProps } from "../components/progress_bars/progress_bar";
import { ProgressBarThin, ProgressBarThinProps } from "../components/progress_bars/progress_bar_thin";
import { ProgressStepper, ProgressStepperProps } from '../components/progress_bars/progress_stepper';

export default {
    title: 'Example/ProgressBar',
} as Meta;

const ProgressBarTpl: Story<ProgressBarProps> = (args) => <ProgressBar {...args} />;

export const progress_bar = ProgressBarTpl.bind({});

progress_bar.args = { percents: 20 };

const ProgressBarThinTpl: Story<ProgressBarThinProps> = (args) => <ProgressBarThin {...args} />;

export const progress_bar_thin = ProgressBarThinTpl.bind({});

progress_bar_thin.args = { percents: 20, title: 'Title' };

const ProgressStepperTpl: Story<ProgressStepperProps> = (args) => <ProgressStepper {...args} />;

export const progress_bar_stepper = ProgressStepperTpl.bind({});

progress_bar_stepper.args = {
    stepperHeight: 6,
    percents: 40,
    title: 'Title',
    steps: 3,
    colors: [ '#4B46EC', '#FE8F20', '#04A777'],
    backgroundColor: '#FE8F20',
    backButton: true,
    handleBack: () => {
        console.log('back button called');
    }
};
