Elep

import React, { useState, useEffect } from 'react';
import { HashRouter as Router, Route, NavLink } from "react-router-dom";
import Places from '../Places';
import ProfileInfo from '../ProfileInfo';
import Reviews from '../Reviews';

const ProfileContent = (props) => {
	const [currentTab, setCurrentTab] = useState('reviews')
	const [role, setRole] = useState('');

function changeTab(tab){

}

useEffect(() => {
		setRole(props.info.role)
	}, [props.info.role])

console.log(props)
	
    return (
		<Router>
			<div className="profile-content">
				<div className="tabs">
					<NavLink to="/account">Profile</NavLink>
					
					{role === 'admin' ? <NavLink to="/places">Places</NavLink> : <NavLink to="/reviews">Reviews</NavLink>}
				</div>
				<div className="tabs-content" style={{ maxWidth: '500px'}}>
					<Route path="/reviews">
						<Reviews user={props.info._id} />
					</Route>
					<Route path="/account">
						{/* <Places user={props.info} /> */}
						<ProfileInfo user={props.info} />
					</Route>
					<Route path="/places">
						<Places user={props.info} />
					</Route>
				</div>
			</div>
		</Router>
    )
}

export default ProfileContent