import { createElement } from "#core/factories/element.factory";

const INPUT_EVENT = "input";
const SEARCH_TYPE = "search";

export const createFilterBox = function createFilterBox(
    placeholder: string,
    label: string,
    onQuery: (query: string) => void,
): HTMLInputElement {
    const input = createElement("input", {
        attributes: { "aria-label": label, placeholder, type: SEARCH_TYPE },
        className: "filter-box",
    });
    input.addEventListener(INPUT_EVENT, () => {
        onQuery(input.value.trim().toLowerCase());
    });
    return input;
};