import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
const Icons = ({ icons, prefix, children }) => {
    const [filter, setFilter] = useState("");
    const filteredIcons = filter
        ? icons.filter((name) => name.toLowerCase().includes(filter.toLowerCase()))
        : icons;
    return (_jsxs("div", { className: "icons-gallery", children: [_jsxs("section", { children: [_jsx("legend", { children: children }), _jsx("input", { type: "text", placeholder: "Buscar", value: filter, onInput: (e) => setFilter(e.target.value) })] }), filteredIcons.length === 0 ? (_jsx("p", { children: "No se encontraron iconos." })) : (_jsxs("ul", { style: { listStyle: "none", padding: 0 }, children: [filteredIcons.map((name) => (_jsx("li", { children: _jsxs("button", { onClick: () => { navigator.clipboard.writeText(name); }, children: [_jsx("div", { children: _jsx("i", { className: `${prefix} ${prefix}-${name}` }) }), _jsx("p", { children: name })] }) }, name))), _jsx("li", {})] }))] }));
};
export default Icons;
