import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// VerticalBreadcrumb.tsx
import { useState } from 'react';
import './style.scss';
import { ClickableText, GetSvgIcon } from '../..';
const VerticalBreadcrumb = ({ items, initailBreadCrumbToShow }) => {
    const [show, setShow] = useState(false);
    const [buttonText, setButtonText] = useState('View all');
    return (_jsxs("div", { className: "vertical-breadcrumb", children: [show === false && items.map((item, index) => index < initailBreadCrumbToShow && (_jsxs("div", { className: 'parent', children: [_jsxs("div", { className: "breadcrumb-item", children: [_jsx("span", { className: `${item.color}-circular-svg`, children: _jsx(GetSvgIcon, { iconType: item.breadCrumbIcon, iconSize: '16' }) }), _jsxs("span", { className: 'text-breadcrumb-item', children: [item.breadCrumbText, _jsx("span", { className: 'text-date-breadcrumb-item', children: item.date })] })] }, index), index < initailBreadCrumbToShow - 1 && _jsx("div", { className: 'hrLine--Vertical---breadcrumb-item' })] }))), show && items.map((item, index) => (_jsxs("div", { className: 'parent', children: [_jsxs("div", { className: "breadcrumb-item", children: [_jsx("span", { className: `${item.color}-circular-svg`, children: _jsx(GetSvgIcon, { iconType: item.breadCrumbIcon, iconSize: '16' }) }), _jsxs("span", { className: 'text-breadcrumb-item', children: [item.breadCrumbText, _jsx("span", { className: 'text-date-breadcrumb-item', children: item.date })] })] }, index), index < items.length - 1 && _jsx("div", { className: 'hrLine--Vertical---breadcrumb-item' })] }))), _jsx(ClickableText, { text: buttonText, onClick: () => {
                    show ? setShow(false) : setShow(true);
                    buttonText.includes('View all') ? setButtonText('View less') : setButtonText('View all');
                } })] }));
};
export default VerticalBreadcrumb;
