import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useState } from 'react';
import Icon from '../Icon/Icon.js';
import Tooltip from '../Tooltip/Tooltip.js';
import Typography from '../Typography/Typography.js';
import classNames from '../../_virtual/index.js';
import HighlightText from '../HighlightText/HighlightText.js';

/**
 * 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)', accordionContentStyle = {}, }) => {
    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, ...accordionContentStyle }, className: "accordion-content", children: accordionContent }))] }));
};

export { Accordion as default };
//# sourceMappingURL=Accordion.js.map
