import { IoIosLock } from "react-icons/io";
import {Link} from 'react-router-dom';
import {useSelector} from 'react-redux'


const Navbar = () => {
    const {currentUser} = useSelector((state) => state.user)
    

  return (
    <header className="bg-blue-950">
        <div className="flex justify-between items-center mx-auto">
            <Link to="/">
                <div className="logo flex flex-col w-45 p-4 text-center bg-white sm:p-5 sm:w-50 ">
                    <h1 className=" text-blue-900 text-xl border-b-2 uppercase tracking-wide font-serif sm:text-2xl">Chicagoland</h1>
                    <h3 className=" text-gray-600 text-xs mt-1 uppercase tracking-widest">Lifestyle properties</h3>
                </div>
            </Link>
            <ul className="flex gap-4 sm:px-10 px-5">
                <Link to="/"><li className="text-white tracking-wide text-center uppercase text-sm hidden md:inline">Home</li></Link>
                <Link to="/search"><li className="text-white tracking-wide text-center uppercase text-sm hidden md:inline">Buying/Renting</li></Link>
                <Link to="/contact"><li className="text-white tracking-wide text-center uppercase text-sm hidden md:inline">Agents</li></Link>
                <Link to="/profile" className="flex items-center gap-1">
                {currentUser ? (
                    <img className="rounded-full h-7 w-7 object-cover bg-blue-100" src={currentUser.avatar} alt="" />
                ): (
                    <li className="text-white tracking-wide text-center uppercase text-sm">Login <IoIosLock className="hidden md:inline"/></li>
                )}
                </Link>
                   
            </ul>
        </div>
        
    </header>
  )
}

export default Navbar