import PrimaryButton from "./PrimaryButton";
import SearchIcon from "@mui/icons-material/Search";
import RestartAltIcon from "@mui/icons-material/RestartAlt";
import TextInput from "./TextInput";
import InputLabel from "./InputLabel";

interface FilterFormProps {
    handleSubmit: (e: React.FormEvent) => void;
    handleReset: () => void;
    data: { [key: string]: string | null };
    setData: (key: string, value: string | null) => void;
    placeholders: { [key: string]: string };
    types: { [key: string]: string };
}

export default function SearchBar({
    handleSubmit,
    handleReset,
    data,
    setData,
    placeholders,
    types,
}: FilterFormProps) {
    return (
        <form
            onSubmit={handleSubmit}
            className="flex flex-col md:flex-row md:space-x-4 items-center"
        >
            {/* Szűrő label */}
            <div className="w-full md:w-auto flex items-center md:mr-4">
                <span className="font-semibold text-2xl text-babolygo-pink">
                    Szűrő:
                </span>
            </div>

            {/* Input fields */}
            <div className="flex flex-col md:flex-row md:space-x-4 w-full md:w-auto">
                {Object.keys(data).map((key) => (
                    <div key={key} className="flex flex-col w-full md:w-auto">
                        <TextInput
                            placeholder={placeholders[key]}
                            type={types[key] || "text"}
                            name={key}
                            value={data[key] || ""}
                            onChange={(e) =>
                                setData(
                                    key,
                                    e.target.value === "" ? null : e.target.value
                                )
                            }
                            className="p-2 border rounded focus:outline-none w-full md:w-auto"
                        />
                    </div>
                ))}
            </div>

            {/* Buttons */}
            <div className="flex space-x-2 mt-2 md:mt-0 md:ml-4">
                <PrimaryButton
                    type="submit"
                    className="flex items-center justify-center p-2"
                >
                    <SearchIcon />
                </PrimaryButton>
                <PrimaryButton
                    type="button"
                    onClick={handleReset}
                    className="flex items-center justify-center p-2 !bg-babolygo-pink hover:!bg-pink-700"
                >
                    <RestartAltIcon />
                </PrimaryButton>
            </div>
        </form>
    );
}