import React from 'react';
import { useFormState } from 'react-use-form-state';

/**
 * @typedef {Object} SearchBoxPropsFields
 * @property {function} onSearch
 */

 /**
 * @typedef {SearchBoxPropsFields} SearchBoxProps
 */

/**
 * @param {SearchBoxProps} props
 */
function SearchBox({ onSearch }) {
    let onSubmit = (/** @type React.FormEvent<HTMLFormElement> */ event) => {
        event.preventDefault();
        onSearch(formState.values.search);
    };
    const [formState, { text }] = useFormState();
    return (
        <form onSubmit={onSubmit}>
            <input name="search" className="text"
                placeholder="Search..." value={formState.values.search} {...text('search')} />
        </form>
    );
}

export default SearchBox;