import {useState, useEffect} from 'react';
import './css/OtherProfile.css';
import {useParams, useNavigate} from 'react-router-dom';
import axios from 'axios';
import Header from './Header';

const OtherProfile = () => {
    const navigate = useNavigate();
    const {id} = useParams('');
    const [user, setUser] = useState(null);
    const [avatar, setAvatar] = useState('');
    const [error, setError] = useState('');
    const [description, setUserDescription] = useState('');

    useEffect(() => {
        const checkSession = async () => {
            try {
                const response = await axios.get('/api/users/' + id);
                setUser(response.data.display_name);
                setAvatar(response.data.avatar_url);
                if (response.data.description === '') {
                    setUserDescription('Описание отсутствует')
                } else {
                    setUserDescription(response.data.description);
                }
            } catch (err) {
                setError('Вы не авторизованы');
                setTimeout(() => {
                    navigate('/login');
                }, 1500);
            }
        };
        checkSession();
    }, [id, navigate]);

    return (
        <><Header/>
            <div className="profile-page user-info">
                {error && <div className="error">{error}</div>}
                <div className="profile-info">
                    <div className="name-with-avatar">
                        <div className="user-name">{user}</div>
                        <img className="profile-avatar" src={avatar} alt={''}/>
                    </div>
                    <div className="user-description">{description}</div>
                </div>
            </div>
        </>
    );
}
export default OtherProfile;