import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { BadgeNonClickable, ClickableText, SkillIndustryBadge } from "../..";
import "./style.scss";
const BadgeNonClickableList = ({ initialItemsToShow = 3, matchingList = ["Design", "UI", "UX", "UX Research", "HCI"], text = "Skills", badge = false, missing, }) => {
    const [count, setCount] = useState(initialItemsToShow);
    const [buttonText, setButtonText] = useState(`${matchingList.length >= initialItemsToShow
        ? matchingList.length - initialItemsToShow
        : matchingList.length} More`);
    return (_jsxs("span", { className: "badge-nonclickable-List", children: [_jsxs("div", { children: [_jsx("span", { children: text }), missing ? _jsxs("span", { className: "missing", children: [missing, " missing"] }) : _jsx(_Fragment, {})] }), _jsx("span", { className: "skills-badges-neutral", children: matchingList
                    .filter((item) => item)
                    ?.slice(0, count)
                    .map((item, index) => badge ? (_jsx(SkillIndustryBadge, { text: item }, index)) : (_jsx(BadgeNonClickable, { text: item, variant: "neutral", showIcon: false }, index))) }), matchingList.length > initialItemsToShow && (_jsx(ClickableText, { colorVariant: "gray", sizeVariant: "sm", text: buttonText, onClick: () => {
                    // show ? setShow(false) : setShow(true);
                    matchingList.length === count
                        ? setButtonText(`${matchingList.length - initialItemsToShow} More`)
                        : setButtonText("View less");
                    setCount(matchingList.length === count
                        ? initialItemsToShow
                        : matchingList.length);
                } }))] }));
};
export default BadgeNonClickableList;
