import zdjecie from '../../../../assets/turtleProfileImg3.webp';
import logoutIcon from '../../../../assets/logout.svg';
import Cookies from 'js-cookie';
import { useContext } from 'react';
import { AuthContext } from '@/utils/AuthProvider.tsx';

function UserProfile() {
  const { user } = useContext(AuthContext);
  function logout() {
    Cookies.remove('token');
    localStorage.removeItem('contact');
    window.location.reload();
  }

  return (
    <div className="dropdown dropdown-top border-t border-zinc-800">
      <div
        tabIndex={0}
        className="flex items-center cursor-pointer"
        role="button"
      >
        <div className="flex items-center justify-center m-3 w-10 h-10 overflow-hidden rounded-full bg-gray-100">
          <img
            src={zdjecie}
            alt="Profile image"
            className="h-full w-full object-cover"
          />
        </div>
        <div className="text-gray-200">
          <p>{user?.username}</p>
        </div>
      </div>

      <ul
        tabIndex={0}
        className="m-2 dropdown-content menu p-2 shadow bg-gray-50 rounded-md w-52"
      >
        <li>
          <a
            className="flex items-center px-4 py-2 text-sm text-black hover:bg-gray-200"
            onClick={logout}
          >
            <img
              className="w-5 mr-2"
              draggable={false}
              src={logoutIcon}
              alt="Log out icon"
            />
            <p>Log out</p>
          </a>
        </li>
      </ul>
    </div>
  );
}

export default UserProfile;
