src/components/SearchBox.jsx

function SearchBox({ value, onChange, onSearch, loading }) {
    const handleSubmit = (event) => {
        event.preventDefault();
        if (!value?.trim() || !onSearch) return;
        onSearch(value.trim());
    };

    return (
        <form onSubmit={handleSubmit} className="mx-auto w-full max-w-[860px]">
            <div className="group relative">
                <div className="pointer-events-none absolute inset-0 rounded-full border-2 border-black/10 transition-all group-focus-within:border-black/40" />
                <div className="relative flex items-center gap-4 rounded-full border-2 border-black bg-white px-6 py-4 shadow-[8px_8px_0px_0px_rgba(0,0,0,0.05)] transition-all group-hover:shadow-[10px_10px_0px_0px_rgba(0,0,0,0.08)] md:px-9 md:py-5">
                    <span className="material-symbols-outlined shrink-0 text-black">search</span>
                    <input
                        type="text"
                        value={value}
                        onChange={(event) => onChange?.(event.target.value)}
                        disabled={loading}
                        placeholder="Nhập từ khóa hoặc dán URL của tin tức..."
                        className="w-full border-0 bg-transparent text-base font-medium text-black placeholder:text-slate-400 focus:ring-0 md:text-lg"
                    />
                    <button
                        type="submit"
                        disabled={loading || !value?.trim()}
                        className="flex shrink-0 items-center gap-2 rounded-full bg-black px-5 py-2.5 text-xs font-black uppercase tracking-[0.15em] text-white transition-all hover:bg-slate-800 disabled:cursor-not-allowed disabled:bg-slate-400 md:px-8"
                    >
                        <span className="material-symbols-outlined text-base">
                            {loading ? 'progress_activity' : 'arrow_forward'}
                        </span>
                        <span className="hidden sm:inline">Tìm kiếm</span>
                    </button>
                </div>
            </div>
        </form>
    );
}

export default SearchBox;