import {ChangeEvent} from "react";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
import {SelectBoxProps} from "@/shared/interface";

interface SearchInputWithSelectProps {
    selectValue: string;
    setSelectValue: (value: string) => void;
    selectOptions: SelectBoxProps[];
    inputValue: string;
    setInputValue: (value: string) => void;
    inputPlaceholder?: string;
    searchIcon: IconDefinition;
    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="bg-secondary/50 text-text-primary px-4 py-2.5 rounded-xl border border-secondary/50 focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary hover:bg-secondary hover:border-secondary outline-none transition-all duration-200 font-medium"
            >
                {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="w-full bg-secondary/50 text-text-primary px-4 py-2.5 rounded-xl border border-secondary/50 focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary hover:bg-secondary hover:border-secondary placeholder:text-muted/60 outline-none transition-all duration-200 pr-12"
                    onKeyDown={onKeyDown}
                />
                <button
                    onClick={onSearch}
                    className="absolute right-0 top-0 h-full px-4 text-primary hover:text-primary-light hover:scale-110 transition-all duration-200"
                >
                    <FontAwesomeIcon icon={searchIcon} className="w-5 h-5"/>
                </button>
            </div>
        </div>
    );
}