import React, { useState } from 'react';
import MyProfile from './MyProfile';
import MyTeam from './MyTeam';
import MyNotifications from './MyNotifications';
import { ProfileProps } from '../../../model/components/profile';
import { Team, User } from '../../../model/user';

const Profile: React.FC<ProfileProps> = ({
  departments,
  user: initialUser,
  team: initialTeam,
}) => {
  const [user, setUser] = useState<User>(initialUser);
  const [team, setTeam] = useState<Team>(initialTeam);

  return (
    <section className="profile">
      <article className="wrapper">
        <MyProfile
          departments={departments}
          user={user}
          onChangeUser={setUser}
          onChangeTeam={setTeam}
        />
        {team ? (
          <MyTeam user={user} team={team} onChangeTeam={setTeam} />
        ) : null}
        <MyNotifications notifications={user.notifications} team={team} />
      </article>
    </section>
  );
};

export default Profile;