import { Link, useLocation } from 'react-router-dom';
import { FiShoppingCart, FiUser } from 'react-icons/fi';

const Navbar = ({ user, cartCount, setUser }) => {
  const location = useLocation();

  const logout = () => {
    localStorage.removeItem('token');
    setUser(null);
  };

  return (
    <nav className="bg-white shadow-lg sticky top-0 z-50">
      <div className="container mx-auto px-4">
        <div className="flex justify-between items-center py-4">
          <Link to="/" className="text-2xl font-bold text-blue-600">Shopify</Link>
          
          <div className="flex items-center space-x-6">
            <Link to="/" className={`hover:text-blue-600 ${location.pathname === '/' ? 'text-blue-600 font-semibold' : ''}`}>Home</Link>
            <Link to="/shop" className={`hover:text-blue-600 ${location.pathname === '/shop' ? 'text-blue-600 font-semibold' : ''}`}>Shop</Link>
            <Link to="/about" className="hover:text-blue-600">About</Link>
            <Link to="/contact" className="hover:text-blue-600">Contact</Link>
            
            {user ? (
              <>
                <Link to="/cart" className="relative">
                  <FiShoppingCart className="w-6 h-6" />
                  {cartCount > 0 && (
                    <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                      {cartCount}
                    </span>
                  )}
                </Link>
                <div className="flex items-center space-x-2">
                  <FiUser className="w-5 h-5" />
                  <span>{user.name}</span>
                  {user.role === 'admin' && (
                    <Link to="/admin" className="ml-2 px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700">
                      Admin
                    </Link>
                  )}
                  <button onClick={logout} className="ml-2 text-sm text-red-600 hover:underline">Logout</button>
                </div>
              </>
            ) : (
              <>
                <Link to="/login" className="px-4 py-2 border border-blue-600 text-blue-600 rounded hover:bg-blue-600 hover:text-white">Login</Link>
                <Link to="/register" className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Register</Link>
              </>
            )}
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;