import { useRouter } from "next/navigation";
import { useState } from "react";
import { IoSearchOutline } from "react-icons/io5";


const SearchComponent = () => {
    const router = useRouter()
    const [searchKey, setSearchKey] = useState("");

    const handleSearch = (e: React.FormEvent) => {
        e.preventDefault();
        router.push(`/search?q=${encodeURIComponent(searchKey)}`);
    };
    return (
        <form action="#" method="GET" className="hidden md:block md:pl-2" onSubmit={handleSearch}>

            <div className="relative md:w-64 lg:w-96 flex flex-row bg-white rounded-lg">
                <input
                    type="text"
                    id="topbar-search"
                    className="text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block
                           w-[92%] pl-3 p-2.5 "
                    placeholder="Search"
                    onChange={(e) => setSearchKey(e.target.value)}
                />
                <button className="flex items-center justify-center w-[8%] font-semibold bg-cyan-400 rounded-r-lg">
                    <IoSearchOutline />
                </button>
            </div>
        </form>
    );
}

export default SearchComponent