import { BsCart4 } from "react-icons/bs";

import { Link } from "react-router-dom";


const Navbar = (props) => {
  const { name } = props;
  return (
    <>
      <div className="lg:flex lg:justify-between grid  p-2 bg-white shadow-md border-2 rounded-b-xl  gap-2 ">
        <div className="flex items-center gap-3">
        
        
          <h1 className="text-xl font-bold text-[#AFA0D7]">{name}</h1>
        </div>
        <div className="flex">
          <div class="min-w-full">
            <div class="relative flex items-center w-full lg:w-[20rem] h-12 rounded-lg focus-within:shadow-lg bg-[#ECF0F3] overflow-hidden ">
              <div class="grid place-items-center h-full w-12 text-gray-500">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-6 w-6"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                  />
                </svg>
              </div>
              <input
                class="peer h-full w-full outline-none text-sm text-gray-500 pr-2 bg-[#ECF0F3] rounded-lg "
                type="text"
                id="search"
                placeholder="Search something.."
              />
              <Link to="" className="bg-white p-5 rounded-l-full">
                <BsCart4 className="text-black text-2xl" />
              </Link>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};



export default Navbar;
