import React from 'react'
import { Link, useRouteMatch } from 'react-router-dom';
import './persona-selection.styles.scss'
const PersonaSelectionCard = props => {

    let { url } = useRouteMatch()

    return (
        <div id="myTabContent" className="tab-content">
            <div id="selectrole" role="tabpanel" aria-labelledby="select-tab" className="tab-pane fade show active">
                <div className="row">
                    <div className="col-md-10 m-auto">
                        <div className="text-center mt-4">
                            <img src="images/signup.png" className="img-fluid" alt="none"/>
                            <h2 className="fieldset-title">Please Select Role &amp; Join Now</h2>
                        </div>
                        <div className="list-group mb-4">
                            
                            <Link to={`${url}/educator`} className="link-register mb-2 text-left">
                                <i className="icofont-ui-user signup-icon"/>
                                <span>Educator</span> 
                            </Link>
                            <Link to={`${url}/patient`} className="link-register mb-2 text-left">
                                <i className="icofont-paralysis-disability signup-icon"/>
                                <span>Patient</span>
                            </Link>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

    )
}

export default PersonaSelectionCard