import React from 'react'
import { Switch, useRouteMatch, Route } from 'react-router-dom';

import illustration from '../sign-in/images/login.png'
import PersonaSelectionCard from './cards/persona/persona-selection.card'
import EducatorRegisterCard from "./cards/educator/educator-register.component"
import PatientRegisterCard from "./cards/patient/patient-register.component"
import './sign-up.styles.scss'

const SignUp = () => {
    let { path } = useRouteMatch()

    return <section className="signin-content">
        <div className="container">
            <div className="row">
                {/* left part*/}
                <div className="col-md-7 img-responsive">
                    <img src={illustration} className="img-fluid mt-4" alt="not-available" />
                </div>
                {/* right part*/}
                <div className="col-md-5">
                    <div className="form-box ml-2">
                        <Switch>
                            <Route exact path={path}>
                                <PersonaSelectionCard />                                
                            </Route>
                            <Route exact path={`${path}/patient`}>
                                <PatientRegisterCard />                                
                            </Route>
                            <Route exact path={`${path}/educator`}>
                                <EducatorRegisterCard />                                
                            </Route>

                        </Switch>
                    </div>
                </div>
            </div>
        </div>
    </section>

}




export default SignUp