import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import styles from "./style.module.scss";
const AssignmentBreadCrumb = ({ breadCrumbItems = [{ label: "New", count: 3 }], archivedCount, handleArchiveClick = () => { }, selectedTab, handleClick = (_tab) => { }, dataCy, }) => {
    const getBreadCrumbClassName = (tab) => {
        const isSelected = selectedTab === tab;
        return clsx({
            [styles.breadCrumb]: !isSelected,
            [styles.breadCrumbActive]: isSelected,
        });
    };
    const archiveButtonClassName = clsx({
        [styles.archivedButton]: selectedTab !== "Archived",
        [styles.archivedButtonSelected]: selectedTab === "Archived",
    });
    return (_jsxs("div", { className: styles.assignmentBreadCrumb, children: [_jsx("span", { className: styles.breadCrumbBar, children: breadCrumbItems.map((item, index) => (_jsxs("button", { className: getBreadCrumbClassName(item.label), onClick: () => handleClick(item.label), disabled: item.label === selectedTab, "data-cy": `${dataCy}-${item.label.toLowerCase()}`, children: [_jsxs("div", { className: styles.breadCrumbContent, children: [item.label, _jsx("p", { className: styles.tabCount, children: item.count })] }), _jsx("div", {})] }, index))) }), _jsx("button", { className: archiveButtonClassName, onClick: handleArchiveClick, "data-cy": `${dataCy}-archived`, children: _jsxs("div", { className: styles.breadCrumbContent, children: ["Archived", _jsx("p", { className: styles.tabCount, children: archivedCount })] }) })] }));
};
//
export default AssignmentBreadCrumb;
