import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import './Accordion.scss';
import Icon from '../Icon';
import '../../../index.scss';
import Tooltip from '../Tooltip';
import Typography from '../Typography';
import classNames from 'classnames';
import HighlightText from '../HighlightText';
/**
 * Accordion UI component
 */
const Accordion = ({ highlightText = '', headerTitle = '', color, minHeight = '32px', // Default min-height for accordion content
accordionContent = _jsx(_Fragment, { children: "This is accordion content" }), disable = false, disableInfoMessage = '', accordionStateIconName = 'arrow_down', AccordionStateIconWidth = 12, AccordionStateIconHeight = 8, isExpand, onClick, className = '', iconColor = 'var(--brand-color)', }) => {
    const [isAccordionExpanded, setIsAccordionExpanded] = useState(isExpand ?? true);
    const onAccordionClick = () => {
        if (onClick) {
            onClick();
        }
        if (!disable) {
            setIsAccordionExpanded(!isAccordionExpanded);
        }
    };
    return (_jsxs("div", { className: `ff-accordion ${className}`, children: [_jsxs("div", { className: `accordion-header ${disable && 'ff-disabled'} ${isAccordionExpanded && 'expanded'} `, style: { color: color || '--tooltip-bg-color' }, onClick: onAccordionClick, children: [_jsx(Tooltip, { title: disableInfoMessage, children: _jsx(Typography, { as: "div", className: "header-title", fontWeight: "semi-bold", lineHeight: "18px", children: typeof headerTitle === "string" ?
                                _jsx(HighlightText, { text: headerTitle, highlight: highlightText }) : headerTitle }) }), _jsx(Icon, { name: accordionStateIconName, hoverEffect: false, className: classNames('accordion-arrow', {
                            expanded: isAccordionExpanded,
                        }), width: AccordionStateIconWidth, height: AccordionStateIconHeight, color: iconColor })] }), !disable && isAccordionExpanded && (_jsx("div", { style: { minHeight }, className: "accordion-content", children: accordionContent }))] }));
};
export default Accordion;
//# sourceMappingURL=Accordion.js.map