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 ExperienceCard from "../../ExperienceAndEducatioCard";
import { isFirstExperience, isLastExperience } from "../../../utils";
const DynamicExperienceCardList = ({ experiences, initialItemsToShow, onCompanyClick, dataCy, }) => {
    const [count, setCount] = useState(initialItemsToShow);
    const [buttonText, setButtonText] = useState(`${experiences.length > initialItemsToShow
        ? experiences.length - initialItemsToShow
        : experiences.length} More`);
    return (_jsx(_Fragment, { children: _jsxs("ul", { className: "experience--ul--container", children: [experiences?.slice(0, count).map((item, index) => (_jsx("li", { className: "experience-li", children: _jsx(ExperienceCard, { iconUrl: item.iconUrl, position: item.position, company: item.company, from: item.from, to: item.to, separator: item.separator, universalName: item.universalName, urn: item.urn, onExperienceCompanyClick: onCompanyClick, industries: item.industries, isFirstExperience: isFirstExperience({ experiences, index }), isLastExperience: isLastExperience({
                            experiences: experiences.slice(0, count),
                            index,
                        }) }) }, index))), _jsx("li", { className: "experience-more-button-li", children: experiences.length > initialItemsToShow &&
                        experiences.length - initialItemsToShow >= 0 && (_jsx(ClickableText, { colorVariant: "gray", sizeVariant: "sm", text: buttonText, onClick: () => {
                            experiences.length === count
                                ? setButtonText(`${experiences.length - initialItemsToShow} More`)
                                : setButtonText("View less");
                            setCount(experiences.length === count
                                ? initialItemsToShow
                                : experiences.length);
                        }, dataCy: `${dataCy}-view-more-less` })) })] }) }));
};
export default DynamicExperienceCardList;
