import { Link } from "react-router-dom";
import { useState, useEffect } from "react";
import userApi from "../../apis/user.api";
import catchErrors from "../../context/catchError";

const userprofile = localStorage.getItem("user");
const INIT_USER = {
  id: userprofile,
  name: '',
  img: '',
}

const HomeProfile = () => {
  const [user, setUser] = useState(INIT_USER)

  async function getSetUser(userID) {
    try {
      // console.log('userID', userID)
      const data = await userApi.getUser( userID )
      // console.log(data)
      setUser(data)
      // console.log(user)
    } catch (error) {
      // catchErrors(error, setError)
    }
  }

  useEffect(() => {
    getSetUser(userprofile)
  }, [userprofile])

  return (
    <Link to={`/profile/${user.id}`} className="text-decoration-none text-dark">
      <form className="flex-column align-items-center justify-content-center m-2">
        <div className="d-flex justify-content-center">
          <img
            src={`/uploads/${user.img}`}
            className="rounded-circle"
            style={{
              width: "157px",
              height: "157px",
            }}
            // value={user.img}
          />
        </div>
        <h1 className="d-flex justify-content-center"> {user.name} </h1>
        <h2 className="d-flex justify-content-center"> #{user.id} </h2>
      </form>
      <div
        style={{ backgroundColor: "#262626", width: "auto", height: "2px" }}
      />
    </Link>
  );
};

export default HomeProfile;