import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import "./style.scss";
const VariantsList = ({ variants }) => {
    const [activeVariant, setActiveVariant] = useState(0);
    function variantList(name, text, currentIndex) {
        if (name === "Custom") {
            return (_jsx("div", { className: `variantList--Custom ${activeVariant === currentIndex ? 'active-variant' : ''}`, onClick: () => setActiveVariant(currentIndex), children: _jsx("p", { className: "variantListCustomText", children: "Custom" }) }));
        }
        else {
            return (_jsxs("div", { className: `variantList--Generic ${activeVariant === currentIndex ? 'active-variant' : ''}`, onClick: () => setActiveVariant(currentIndex), children: [_jsx("div", { children: _jsx("p", { className: "variantList-Heading", children: name }) }), _jsx("div", { children: _jsx("p", { className: "variantList-Text", children: text.length >= 23 ? `${text.slice(0, 23)}..` : text }) })] }));
        }
    }
    return (_jsx("div", { className: "variantsList-Container", children: variants.map((variant, index) => variantList(variant.name, variant.text, index)) }));
};
export default VariantsList;
