import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { UtensilsCrossed, User, LogOut } from 'lucide-react';

const Navbar = () => {
  const navigate = useNavigate();
  const userInfo = JSON.parse(localStorage.getItem('userInfo'));

  const handleLogout = () => {
    localStorage.removeItem('userInfo');
    navigate('/login');
  };

  return (
    <nav className="fixed top-0 left-0 right-0 z-50 h-20 flex items-center glass">
      <div className="container mx-auto px-6 flex justify-between items-center">
        <Link to="/" className="flex items-center gap-2 text-2xl font-bold font-outfit text-secondary">
          <UtensilsCrossed size={28} className="text-primary" />
          <span>TableReserve</span>
        </Link>
        
        <ul className="hidden md:flex gap-8">
          <li>
            <Link to="/" className="font-medium text-gray-500 hover:text-primary transition-colors">
              Explore
            </Link>
          </li>
          {userInfo && userInfo.role === 'user' && (
            <li>
              <Link to="/my-bookings" className="font-medium text-gray-500 hover:text-primary transition-colors">
                My Bookings
              </Link>
            </li>
          )}
          {userInfo && userInfo.role === 'owner' && (
            <li>
              <Link to="/owner" className="font-medium text-gray-500 hover:text-primary transition-colors">
                Owner Dashboard
              </Link>
            </li>
          )}
        </ul>

        <div className="flex items-center gap-6">
          {userInfo ? (
            <div className="flex items-center gap-4">
              <div className="flex flex-col items-end hidden sm:flex">
                <span className="text-sm font-bold text-secondary leading-none">{userInfo.name}</span>
                <span className="text-[10px] text-primary font-bold uppercase tracking-tighter">{userInfo.role}</span>
              </div>
              <button 
                onClick={handleLogout}
                className="text-gray-400 hover:text-red-500 transition-colors"
                title="Logout"
              >
                <LogOut size={20} />
              </button>
            </div>
          ) : (
            <Link to="/login" className="flex items-center gap-2 font-medium text-secondary hover:text-primary transition-colors">
              <User size={20} />
              <span>Sign In</span>
            </Link>
          )}
          
          {!userInfo && (
            <Link to="/owner-login" className="hidden sm:block bg-secondary text-white px-6 py-2.5 rounded-xl font-medium hover:bg-black transition-all">
              Owner Login
            </Link>
          )}
        </div>
      </div>
    </nav>
  );
};

export default Navbar;
