//info: Header component to display the header of the page including the logo and user information where thr user can logout
import { useState } from "react";
import { Link } from "react-router-dom";
import backgroundImage from "../assets/1.jpg";

/**
 * Renders the header component.
 * @returns JSX.Element representing the header component.
 */
function Header(): JSX.Element {
  const [isOpen, setIsOpen] = useState(false);

  const handleLogout = (): void => {
    localStorage.clear();
  };

  return (
    <header
      className="fixed top-0 left-0 right-0 border-[1.75px] border-black text-black p-3 pl-5 flex items-center justify-between bg-cover"
      style={{ backgroundImage: `url(${backgroundImage})` }}
    >
      <Link to="/your-projects">
        <img
          src="/src/assets/Logo.svg"
          alt="TTIME Logo"
          className="w-11 h-14 cursor-pointer"
        />
      </Link>

      <div
        className="relative"
        onMouseEnter={() => {
          setIsOpen(true);
        }}
        onMouseLeave={() => {
          setIsOpen(false);
        }}
      >
        <button className="mr-4 underline font-bold text-white">
          {localStorage.getItem("username")}
        </button>

        {isOpen && (
          <div className="absolute right-0 bg-white border rounded shadow-lg">
            <Link to="/">
              <button
                onClick={handleLogout}
                className="block px-2 py-1 text-black hover:bg-gray-200"
              >
                Logout
              </button>
            </Link>
          </div>
        )}
      </div>
    </header>
  );
}

export default Header;