import {faSearch} from "@fortawesome/free-solid-svg-icons";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import React, {ChangeEvent, Dispatch, SetStateAction} from "react";
import {t} from "i18next";
import TextInput from "@/components/form/TextInput";

export default function SearchBook(
    {
        searchQuery,
        setSearchQuery,
    }: {
        searchQuery: string;
        setSearchQuery: Dispatch<SetStateAction<string>>
    }) {

    return (
        <div className="flex items-center relative my-5 w-full max-w-3xl">
            <div className="relative flex-grow">
                <div className="relative">
                    <FontAwesomeIcon icon={faSearch}
                                     className="absolute left-4 top-1/2 transform -translate-y-1/2 text-primary w-5 h-5 pointer-events-none z-10"/>
                    <div className="pl-11">
                        <TextInput
                            value={searchQuery}
                            setValue={(e: ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
                            placeholder={t("searchBook.placeholder")}
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}