import React,{useEffect, useState} from "react";
import { User } from "lucide-react";
import axios from "axios";
import { API_BASE_URL } from "../config";
import { useTranslation } from "react-i18next";

function UserInfosObject({ user}) {
    const { t } = useTranslation();
    const [userInfo,setuserInfo]=useState({});
    useEffect(()=>{
      console.log(user);
      axios
      .post(`${API_BASE_URL}/publicUser`, {
        id: user,
      })
      .then((response) => {
        setuserInfo(response.data);
        console.log("Modification réussie :", response.data);
      })
      .catch((error) => {
        console.error("Erreur lors de la modification :", error);
      });
    },[user]);
    
  return (
    <div className="bg-white p-6 rounded-xl min-w-5xl">
      <div className="flex align-items gap-6 mb-6">
        <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-1">
          <User className="text-indigo-600" size={24} />
        </div>
        <h1 className="text-black text-2xl font-bold mb-1 ">{t('components.userInfosObject.title')}</h1>
      </div>
        <div className="mb-5">
          <p className="text-black-900 font-bold">{t('components.userInfosObject.pseudo')}</p>
          <p className="text-gray-600 capitalize">{userInfo.pseudo}</p>
        </div>

        <div className="mb-5">
          <p className="text-black-900 font-bold">{t('components.userInfosObject.gender')}</p>
          <p className="text-gray-600 capitalize">{userInfo.gender}</p>
        </div>

        <div className="mb-5">
          <p className="text-black-900 font-bold">{t('components.userInfosObject.points')}</p>
          <p className="text-gray-600">{userInfo.points}</p>
        </div>
    </div>
  );
}

export default UserInfosObject;