import Step from '../Step';
import ZoneSelector from './ZoneSelector' 
import StepInformation from '../StepInformation';
import staticText from '../../../assets/data/staticText.json'
import zoneBackgroundImage from '../../../assets/img/stepBackgrounds/step4.jpg';

export default function ZoneStep(props) {
    const zoneInfoPanel = (
        <StepInformation
            title={staticText.steps.zone.title}
            description={<p>{staticText.steps.zone.description}</p>}
        />
    )

    const zoneSelectionPanel = (
        <div style={{padding: '30px', height: "100%", width: "90%", display: "flex", justifyContent: 'center', alignItems: "center"}}>
            <ZoneSelector {...props} />
        </div>
    )

    return (
        <Step informationComponent={zoneInfoPanel} selectionComponent={zoneSelectionPanel} backgroundImage={zoneBackgroundImage} />
    )
}