import React from 'react';

export default function Navbar({ activeTab, setActiveTab, handleLogout }) {
  const tabs = ['Table Management', 'Menu', 'Reservations', 'Payments', 'Reports'];

  return (
    <nav className="bg-white/10 backdrop-blur-md border-b border-white/20 p-4 flex justify-between items-center text-white sticky top-0 z-50">
      <div className="flex items-center space-x-2">
        <span className="text-xl font-bold tracking-wider text-amber-400">Taste of Rwanda</span>
        <span className="text-xs bg-amber-500/20 text-amber-300 px-2 py-0.5 rounded-full border border-amber-500/30">RRBMS</span>
      </div>
      <div className="flex space-x-1">
        {tabs.map((tab) => (
          <button
            key={tab}
            onClick={() => setActiveTab(tab)}
            className={`px-4 py-2 rounded-lg transition-all duration-200 text-sm font-medium ${
              activeTab === tab 
                ? 'bg-amber-500 text-slate-900 shadow-lg shadow-amber-500/20' 
                : 'hover:bg-white/5 text-slate-300 hover:text-white'
            }`}
          >
            {tab}
          </button>
        ))}
        <button 
          onClick={handleLogout}
          className="ml-4 px-4 py-2 bg-rose-500/20 hover:bg-rose-500 text-rose-300 hover:text-white rounded-lg border border-rose-500/30 text-sm font-medium transition-all"
        >
          Logout
        </button>
      </div>
    </nav>
  );
}