import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';

/**
 * Wrapper component for a single setup wizard step.
 *
 * Renders a progress indicator, title, body content, and navigation buttons.
 */
export default function WizardStep({ step, totalSteps, title, children, onNext, onBack, onSkip, nextLabel, loading }) {
    return (
        <div className="appointly-wizard__step">
            <div className="appointly-wizard__progress">
                { Array.from( { length: totalSteps }, ( _, i ) => (
                    <div
                        key={ i }
                        className={ `appointly-wizard__progress-dot ${ i <= step ? 'is-active' : '' }` }
                    />
                ) ) }
            </div>
            <h2 className="appointly-wizard__title">{ title }</h2>
            <div className="appointly-wizard__body">{ children }</div>
            <div className="appointly-wizard__nav">
                { step > 0 && (
                    <Button variant="tertiary" onClick={ onBack }>
                        { __( 'Back', 'appointly' ) }
                    </Button>
                ) }
                { onSkip && (
                    <Button variant="tertiary" onClick={ onSkip }>
                        { __( 'Skip', 'appointly' ) }
                    </Button>
                ) }
                <Button variant="primary" onClick={ onNext } isBusy={ loading }>
                    { nextLabel || __( 'Next', 'appointly' ) }
                </Button>
            </div>
        </div>
    );
}