import React, {ChangeEvent} from "react";
import {LucideIcon} from "lucide-react";
import {SelectBoxProps} from "@/components/form/SelectBox";
import IconButton from "@/components/ui/IconButton";

interface SearchInputWithSelectProps {
    selectValue: string;
    setSelectValue: (value: string) => void;
    selectOptions: SelectBoxProps[];
    inputValue: string;
    setInputValue: (value: string) => void;
    inputPlaceholder?: string;
    searchIcon: LucideIcon;
    onSearch: () => void;
    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
}

export default function SearchInputWithSelect(
    {
        selectValue,
        setSelectValue,
        selectOptions,
        inputValue,
        setInputValue,
        inputPlaceholder,
        searchIcon,
        onSearch,
        onKeyDown
    }: SearchInputWithSelectProps) {
    return (
        <div className="flex items-center space-x-3">
            <select
                value={selectValue}
                onChange={(e: ChangeEvent<HTMLSelectElement>) => setSelectValue(e.target.value)}
                className="input-base cursor-pointer font-medium w-auto"
            >
                {selectOptions.map((option: SelectBoxProps) => (
                    <option key={option.value} value={option.value}>
                        {option.label}
                    </option>
                ))}
            </select>

            <div className="flex-1 relative">
                <input
                    type="text"
                    value={inputValue}
                    onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e.target.value)}
                    placeholder={inputPlaceholder}
                    className="input-base pr-12"
                    onKeyDown={onKeyDown}
                />
                <div className="absolute right-1 top-1/2 -translate-y-1/2">
                    <IconButton icon={searchIcon} variant="ghost" onClick={onSearch}/>
                </div>
            </div>
        </div>
    );
}