import type {ChangeEvent} from 'react'

interface SearchBarProps {
    searchSortCnd: string
    searchKeyword: string
    options: { value: string; label: string }[]
    onChange: (
        name: string,
        value: string
    ) => void
    onSearch: () => void
}

export const SearchBar = ({
                              searchSortCnd,
                              searchKeyword,
                              options,
                              onChange,
                              onSearch
                          }: SearchBarProps) => {
    const handleChange = (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
        onChange(event.target.name, event.target.value);
    }

    return (
        <>
            <select
                id="searchCnd"
                name="searchSortCnd"
                className="search_select"
                value={searchSortCnd}
                onChange={handleChange}
            >
                <option value="">전체</option>
                {options.map((option) => (
                    <option key={option.value} value={option.value}>
                        {option.label}
                    </option>
                ))}
            </select>

            <div className="search_type input_type">
                <input
                    type="text"
                    id="searchWrd"
                    name="searchKeyword"
                    className="input search_input"
                    value={searchKeyword}
                    onChange={handleChange}
                    maxLength={20}
                    placeholder="검색어를 입력하세요"
                />
            </div>

            <button
                type="button"
                className="btn btn_search"
                onClick={onSearch}
            >
                검색
            </button>
        </>
    )
}