import { removeToken, removeCurrentUser } from '../utils/auth';

const Navigation = ({ currentPage, onNavigate, onLogout, mobileMenuOpen, setMobileMenuOpen }) => {
  const handleLogout = () => {
    removeToken();
    removeCurrentUser();
    onLogout();
  };

  const menuItems = [
    { id: 'dashboard', label: 'Dashboard' },
    { id: 'product', label: 'Product' },
    { id: 'warehouse', label: 'Warehouse' },
    { id: 'transactions', label: 'Transactions' },
    { id: 'reports', label: 'Reports' },
  ];


  return (
    <nav className="bg-gray-800 text-white shadow-lg sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center gap-3">
            <button className="md:hidden p-2 rounded hover:bg-gray-700" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              aria-label="Toggle menu">
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
            <h1 className="text-xl sm:text-2xl font-bold text-blue-400">StockHub SMS</h1>
          </div>

          <div className="hidden md:flex items-center space-x-2">
            {menuItems.map((item) => (
              <button key={item.id} onClick={() => onNavigate(item.id)}
                className={`px-3 py-2 rounded transition ${
                  currentPage === item.id ? 'bg-blue-600' : 'hover:bg-gray-700'
                }`}>
                {item.label}
              </button>
            ))}
            <button onClick={handleLogout}
              className="bg-red-600 hover:bg-red-700 px-3 py-2 rounded transition ml-2">
              Logout
            </button>
          </div>

          <button onClick={handleLogout} className="md:hidden bg-red-600 hover:bg-red-700 px-3 py-2 rounded text-sm">
            Logout
          </button>
        </div>
      </div>
    </nav>
  );
};

export default Navigation;
