import React, { useState } from 'react';
import { Link } from 'react-router-dom';


function Header({ username }: { username: string }) {
  const [isOpen, setIsOpen] = useState(false);

  const handleLogout = () => {
    // Add any logout logic here
  };

  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('src/assets/1.jpg')` }}>
      <Link to="/your-projects">
      <img src="/src/assets/TTIMElogo.png" 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">
          {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;