import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import "./style.scss";
import { useState } from "react";
import { ClickableText } from "../..";
import EducationCard from "../../EducationCard";
const DynamicEducationCard = ({ educations = [], initialItemsToShow = 3, dataCy, }) => {
    const [count, setCount] = useState(initialItemsToShow);
    const [buttonText, setButtonText] = useState(`${educations.length > initialItemsToShow
        ? educations.length - initialItemsToShow
        : educations.length} More`);
    return (_jsx(_Fragment, { children: _jsxs("ul", { className: "education--ul--container", children: [educations?.slice(0, count).map((item, index) => (_jsx("li", { className: "education-li", children: _jsx(EducationCard, { iconAltText: item.iconAltText, degree: item.degree, institue: item.institue, from: item.from, to: item.to }) }, index))), _jsx("li", { className: "education-more-button-li", children: educations.length > initialItemsToShow &&
                        educations.length - initialItemsToShow >= 0 && (_jsx(ClickableText, { colorVariant: "gray", sizeVariant: "sm", text: buttonText, onClick: () => {
                            educations.length === count
                                ? setButtonText(`${educations.length - initialItemsToShow} More`)
                                : setButtonText("View less");
                            setCount(educations.length === count
                                ? initialItemsToShow
                                : educations.length);
                        }, dataCy: `${dataCy}-view-more-less` })) })] }) }));
};
export default DynamicEducationCard;
