File: src/components/spacex-data-search/Search.tsx

/**
 * External dependencies.
 */
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies.
 */
import { missions, statuses, types } from "../../utils/spacex-data-helper";
import { ISearch } from "../../interfaces";

export default function Search({
    filter,
    onSearched,
    onFiltered,
    searchText = __('Search', 'bsf-spacex'),
    searchButtonstyle = {}
}: ISearch) {

    const handleSearch = (e: any) => {
        e.preventDefault();
        onSearched(filter);
    }

    const handleChange = (e: any) => {
        onFiltered({
            name: e.target.name,
            value: e.target.value
        });
    }

    return (
        <form className="capsule-filter-form" onSubmit={handleSearch}>
            <div className="form-div-area">
                <label htmlFor="status-select" hidden>
                    {__('Status', 'bsf-spacex')}
                </label>
                <select id="status-select"
                    value={filter.status}
                    onChange={handleChange}
                    name="status"
                >
                    {
                        Object.keys(statuses).map((status, index) => (
                            <option value={status} key={index}>
                                {statuses?.[status]}
                            </option>
                        ))
                    }
                </select>

                <label htmlFor="mission-select" hidden>
                    {__('Mission', 'bsf-spacex')}
                </label>
                <select id="mission-select"
                    value={filter.mission}
                    onChange={handleChange}
                    name="mission"
                >
                    {
                        Object.keys(missions).map((mission, index) => (
                            <option value={mission} key={index}>
                                {missions?.[mission]}
                            </option>
                        ))
                    }
                </select>

                <label htmlFor="type-select" hidden>
                    {__('Type', 'bsf-spacex')}
                </label>
                <select id="type-select"
                    name="type"
                    value={filter.type}
                    onChange={handleChange}
                >
                    {
                        Object.keys(types).map((type, index) => (
                            <option value={type} key={index}>
                                {types?.[type]}
                            </option>
                        ))
                    }
                </select>
            </div>

            <div className="search-button">
                <button type="submit" className="" style={searchButtonstyle}>
                    {searchText}
                </button>
            </div>
        </form>
    )
}