import React from 'react';
import UserProfileBase from './UserProfileBase';
import UserLevelExperience from './UserLevelExperience';
import './UserProfile.css';

const UserProfile = () => {
  const [userId, setUserId] = React.useState(null);

  const loadExperienceInfo = (id) => {
    setUserId(id);
  };

  return (
    <div>
      <UserProfileBase onLoadExperienceInfo={loadExperienceInfo} />
      {userId && <UserLevelExperience userId={userId} />}
    </div>
  );
};

export default UserProfile;