import type {ChangeEvent} from 'react'

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

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

    return (
        <>
            {options && (
                <select
                    id="searchCnd"
                    name="searchCnd"
                    className="search_select"
                    value={searchCnd}
                    onChange={handleChange}
                >
                    {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>
        </>
    )
}