'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React, { useId } from 'react';
import { SearchIcon } from '../../../icons/Search/index.js';
import './index.scss';
const baseClass = 'item-search';
export const ItemSearch = ({ placeholder, setSearchTerm })=>{
    const inputId = useId();
    const labelId = `${inputId}-label`;
    const handleChange = (e)=>{
        setSearchTerm(e.target.value);
    };
    return /*#__PURE__*/ _jsxDEV("div", {
        className: baseClass,
        children: [
            /*#__PURE__*/ _jsxDEV("label", {
                className: "sr-only",
                htmlFor: inputId,
                id: labelId,
                children: placeholder
            }, void 0, false, {
                fileName: "src/elements/ItemsDrawer/ItemSearch/index.tsx",
                lineNumber: 24,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("input", {
                "aria-labelledby": labelId,
                className: `${baseClass}__input`,
                id: inputId,
                onChange: handleChange,
                placeholder: placeholder,
                type: "text"
            }, void 0, false, {
                fileName: "src/elements/ItemsDrawer/ItemSearch/index.tsx",
                lineNumber: 27,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV(SearchIcon, {}, void 0, false, {
                fileName: "src/elements/ItemsDrawer/ItemSearch/index.tsx",
                lineNumber: 35,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/ItemsDrawer/ItemSearch/index.tsx",
        lineNumber: 23,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map