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

const Navbar = () => {

  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>
            {/*<form className="bg-white rounded-lg flex items-center">
                <input  type="text" placeholder="Search your dream property" className="bg-transparent px-4 py-2 focus:outline-none text-sm w-60 sm:w-64"/>
                <IoIosSearch className="text-slate-600 text-lg"/>
            </form>*/}
            <ul className="flex gap-4 text-white tracking-wide text-center px-6 uppercase text-sm sm:px-10">
                <Link to="/"><li className="hidden md:inline">Home</li></Link>
                <Link to="/"><li className="hidden md:inline">Buying</li></Link>
                <Link to="/"><li className="hidden md:inline">Selling</li></Link>
                <Link to="/contact"><li className="hidden md:inline">Contact</li></Link>
                <Link to="/login" className="flex items-center gap-1"><li>Login</li><IoIosLock className="hidden md:inline"/></Link>
            </ul>
        </div>
        
    </header>
  )
}

export default Navbar