"use client";
import { IoSearch } from "react-icons/io5";

export function SearchBar() {
  return (
    <div className="relative w-full">
      <div className="relative">
        <form action="#" method="GET" className="hidden md:block md:pl-2">
          <label htmlFor="topbar-search" className="sr-only">
            Search
          </label>
          <div className="relative md:w-96">
            <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
              <IoSearch className="text-gray-500" />
            </div>
            <input
              type="text"
              name="email"
              id="topbar-search"
              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary focus:border-primary block w-full pl-10 p-2.5"
              placeholder="Search anything"
            />
          </div>
        </form>
      </div>
    </div>
  );
}