import {Search} from 'lucide-react';
import React, {ChangeEvent, Dispatch, SetStateAction} from "react";
import {useTranslations} from '@/lib/i18n';

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

    return (
        <div
            className="flex items-center gap-3 w-full max-w-3xl bg-secondary rounded-xl px-4 py-2.5 border border-secondary hover:bg-gray-dark hover:border-gray-dark focus-within:border-primary focus-within:ring-4 focus-within:ring-primary/20 transition-all duration-200">
            <Search className="text-muted w-4 h-4 flex-shrink-0" strokeWidth={1.75}/>
            <input
                type="text"
                value={searchQuery}
                onChange={(e: ChangeEvent<HTMLInputElement>): void => setSearchQuery(e.target.value)}
                placeholder={t("searchBook.placeholder")}
                className="w-full bg-transparent text-text-primary text-sm placeholder:text-muted outline-none"
            />
        </div>
    )
}