import { Row, Col } from 'reactstrap'
import SampleBackground from '../../assets/img/sample-bg.jpg';

export default function Step(props) {
    const StepBackgroundImage = props.backgroundImage || SampleBackground
    const stepBackground = {
        backgroundImage: `url(${StepBackgroundImage})`
    };

    return (
        <div className='step-container' style={stepBackground}>
            <div className='step-overlay'>
                {props.contentComponent ? (
                    props.contentComponent
                ) : (
                    <Row style={{height: '100%'}}>
                        <Col lg={{ size: "3", offset: 1 }} md="5" sm="12" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
                            {props.informationComponent}
                        </Col>
                        <Col lg={{ size: "7", offset: 1}} md="7" sm="12" style={{display: 'flex', alignItems: 'center'}}>
                            {props.selectionComponent}
                        </Col>
                    </Row>

                )}
            </div>
        </div>
    );
}