import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import './Header.css';

const Header = ({ user, onLogout, isAdmin }) => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const navigate = useNavigate();

  const handleLogout = () => {
    onLogout();
    navigate('/');
  };

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  return (
    <header className="header">
      <div className="header-container">
        <Link to="/" className="logo">
          <img src="/wraffle_logo.png" alt="Wraffle" className="logo-img" />
          <span className="logo-text">Wraffle</span>
        </Link>

        <nav className={`nav ${isMenuOpen ? 'nav-open' : ''}`}>
          <Link to="/" className="nav-link" onClick={() => setIsMenuOpen(false)}>Home</Link>
          <Link to="/shop" className="nav-link" onClick={() => setIsMenuOpen(false)}>Shop</Link>
          <Link to="/about" className="nav-link" onClick={() => setIsMenuOpen(false)}>About</Link>
          <Link to="/contact" className="nav-link" onClick={() => setIsMenuOpen(false)}>Contact</Link>
          <Link to="/cart" className="nav-link" onClick={() => setIsMenuOpen(false)}>Cart</Link>

          {user ? (
            <>
              <Link to="/orders" className="nav-link" onClick={() => setIsMenuOpen(false)}>My Orders</Link>
              {isAdmin && (
                <Link to="/admin" className="nav-link" onClick={() => setIsMenuOpen(false)}>Admin</Link>
              )}
              <span className="nav-user">Welcome, {user.first_name}</span>
              <button className="nav-button logout" onClick={handleLogout}>Logout</button>
            </>
          ) : (
            <>
              <Link to="/auth" className="nav-link" onClick={() => setIsMenuOpen(false)}>Login</Link>
            </>
          )}
        </nav>

        <button className="menu-toggle" onClick={toggleMenu}>
          <span className="menu-bar"></span>
          <span className="menu-bar"></span>
          <span className="menu-bar"></span>
        </button>
      </div>
    </header>
  );
};

export default Header;
