import { jsx as _jsx } from "react/jsx-runtime";
import clsx from "clsx";
import { useEffect, useState } from "react";
import { EllipsisText } from "..";
import "./style.scss";
const ClickableFilterBadge = ({ text = "", onClick = () => { }, isSelected = false, }) => {
    const [isOn, setIsOn] = useState(false);
    useEffect(() => {
        setIsOn(isSelected);
    }, [isSelected]);
    const handleToggle = () => {
        setIsOn(!isOn);
        onClick(!isOn);
    };
    const cumulativeClass = clsx({
        "clickableFIlterBadge--Generic": true,
        "clickableFIlterBadge--Unselected": !isOn,
        "clickableFIlterBadge--Selected": isOn,
    });
    return (_jsx("button", { type: "button", onClick: () => handleToggle(), className: cumulativeClass, children: _jsx(EllipsisText, { children: text }) }));
};
export default ClickableFilterBadge;
