import zdjecie from '../../../assets/profile.svg';
import logoutIcon from '../../../assets/logout.svg';
import Cookies from 'js-cookie';
import { useOutletContext } from 'react-router-dom';
import { UsernameType } from '../../utils/ProtectedRoutes.tsx';

function UserProfile() {
  const { username }: UsernameType = useOutletContext();

  function logout() {
    Cookies.remove('token');
    window.location.reload();
  }
  return (
    <div className="dropdown dropdown-top">
      <div
        tabIndex={0}
        className="flex items-center cursor-pointer"
        role="button"
      >
        <div className="flex items-center justify-center m-3 w-12 h-12 overflow-hidden">
          <img src={zdjecie} alt="Profile image" className="w-8 h-8 invert" />
        </div>

        <div className="text-gray-200">
          <p>{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;
