import {VerticalStepperComponent as VerticalStepper} from './vertical-stepper.component';
import type {Meta, StoryObj} from '@storybook/react';
import React from 'react';
import {VerticalStepComponent as Step} from '../../molecules/vertical-step';

const meta: Meta<typeof VerticalStepper> = {
    title: 'Organisms/VerticalStepper',
    component: VerticalStepper,
};
export default meta;

type Story = StoryObj<typeof VerticalStepper>;

export const Default: Story = {
    render: (args) => (
        <VerticalStepper {...args} data-testid='VerticalStepper' />
    ),
    args: {
        children: (
            <>
                <Step
                    title='Your details'
                    subtitle='Please provide your name and email'
                    color='purple'
                    active
                />
                <Step
                    title='Company details'
                    subtitle='A few details about your company'
                    color='purple'
                    active
                />
                <Step
                    title='Invite your team'
                    subtitle='Start collaborating with your team'
                    color='purple'
                    focus
                />
                <Step
                    title='Add your socials'
                    subtitle='Share posts to your social accounts'
                    color='purple'
                />
            </>
        ),
    },
};