import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";

type HeaderProps = {
  username?: string;
};

export const Header: React.FC<HeaderProps> = ({ username }) => {
  const [menuOpen, setMenuOpen] = useState(false);

  const toggleMenu = () => setMenuOpen(!menuOpen);

  return (
    <header className="w-full bg-white shadow-md sticky top-0 left-0 z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16 items-center">

          {/* Левый блок — логотип / название */}
          <div className="flex-shrink-0">
            <Link to="/" className="text-xl font-bold text-gray-800 hover:text-blue-600">
              NyanimeDB
            </Link>
          </div>

          {/* Центр — ссылки на разделы (desktop) */}
          <nav className="hidden md:flex space-x-4">
            <Link to="/titles" className="text-gray-700 hover:text-blue-600">
              Titles
            </Link>
            <Link to="/users" className="text-gray-700 hover:text-blue-600">
              Users
            </Link>
            <Link to="/about" className="text-gray-700 hover:text-blue-600">
              About
            </Link>
          </nav>

          {/* Правый блок — профиль */}
          <div className="hidden md:flex items-center space-x-4">
            {username ? (
              <Link to="/profile" className="text-gray-700 hover:text-blue-600 font-medium">
                {username}
              </Link>
            ) : (
              <Link to="/login" className="text-gray-700 hover:text-blue-600 font-medium">
                Login
              </Link>
            )}
          </div>

          {/* Бургер для мобильного */}
          <div className="md:hidden flex items-center">
            <button
              onClick={toggleMenu}
              className="p-2 rounded-md hover:bg-gray-200 transition"
            >
              {menuOpen ? (
                <XMarkIcon className="w-6 h-6 text-gray-800" />
              ) : (
                <Bars3Icon className="w-6 h-6 text-gray-800" />
              )}
            </button>
          </div>

        </div>
      </div>

      {/* Мобильное меню */}
      {menuOpen && (
        <div className="md:hidden bg-white border-t border-gray-200 shadow-md">
          <nav className="flex flex-col p-4 space-y-2">
            <Link to="/titles" className="text-gray-700 hover:text-blue-600" onClick={() => setMenuOpen(false)}>Titles</Link>
            <Link to="/users" className="text-gray-700 hover:text-blue-600" onClick={() => setMenuOpen(false)}>Users</Link>
            <Link to="/about" className="text-gray-700 hover:text-blue-600" onClick={() => setMenuOpen(false)}>About</Link>
            {username ? (
              <Link to="/profile" className="text-gray-700 hover:text-blue-600 font-medium" onClick={() => setMenuOpen(false)}>
                {username}
              </Link>
            ) : (
              <Link to="/login" className="text-gray-700 hover:text-blue-600 font-medium" onClick={() => setMenuOpen(false)}>
                Login
              </Link>
            )}
          </nav>
        </div>
      )}
    </header>
  );
};