import * as React from 'react';
import { IStepConnectorForm } from '../../../common/catalogo-protocol';
import { Steps } from 'antd';
import { Box } from '@rebass/grid';

const Step = Steps.Step;

interface ConnectorStepperProps {
    step: number;
    steps: IStepConnectorForm[];
    onStep: (step: number) => void;
}

interface ConnectorStepperState {
}

export default class ConnectorStepper extends React.Component<ConnectorStepperProps, ConnectorStepperState> {
    constructor(props) {
        super(props);

    }

    render() {
        const { step, steps } = this.props;
        return (
            <Box p="1rem">
                <Steps direction="vertical" size="small" current={step}>
                    {
                        steps.map((st, index) => {
                            return <Step key={`step_${index}`} title={st.title} description={st.description} onClick={() => this.props.onStep(index)}/>
                        })
                    }
                </Steps>
            </Box>
        );
    }
}