import type { FC } from 'react';
import React from 'react';
import cx from 'classnames';
import { Step } from './step';
import type { Step as StepT } from './step';
import type { ComponentBaseProps } from '../../types';

export const CLASS_NAME = 'Stepper';

export interface StepperProps extends ComponentBaseProps {
    style?: React.CSSProperties;

    /**
     * The layout of the stepper
     */
    layout?: 'horizontal' | 'vertical';

    /**
     * Steps contained in the stepper
     */
    steps: StepT[];
}

/**
 * Stepper is a visual element that guides users through a multi-step process by breaking it down into smaller steps.
 *
 * @type organism
 * @status live
 * @tags feedback
 */
export const Stepper: FC<StepperProps> = ({
    className,
    style,
    testId = CLASS_NAME,
    layout = 'horizontal',
    steps,
}) => {
    return (
        <div
            className={cx(CLASS_NAME, className, `layout-${layout}`)}
            style={style}
            data-testid={testId}
        >
            {steps.map((step, index) => {
                const stepId = step.id || `${index}`;
                return <Step {...step} key={stepId} id={stepId} layout={layout} />;
            })}
        </div>
    );
};