import { clsx } from 'clsx';
import { useId, cloneElement } from 'react';
import Body from '../../body/Body.mjs';
import Chevron from '../../chevron/Chevron.mjs';
import Option from '../../common/Option/Option.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import { Typography } from '../../common/propsValues/typography.mjs';
import { Position } from '../../common/propsValues/position.mjs';
import { Size } from '../../common/propsValues/size.mjs';

const AccordionItem = ({
  'aria-label': ariaLabel,
  id,
  title,
  subtitle,
  content,
  onClick,
  open,
  icon,
  theme = 'light'
}) => {
  const iconElement = icon ? /*#__PURE__*/cloneElement(icon, {
    size: 24
  }) : null;
  const fallbackId = useId();
  const accordionId = id ?? fallbackId;
  return /*#__PURE__*/jsxs("div", {
    id: accordionId,
    className: clsx('np-accordion-item', iconElement ? 'np-accordion-item--with-icon' : null, {
      'np-accordion-item--open': open
    }),
    children: [/*#__PURE__*/jsx(Option, {
      "aria-label": ariaLabel,
      as: "button",
      media: iconElement,
      title: title,
      content: subtitle,
      button: /*#__PURE__*/jsx(Chevron, {
        orientation: open ? Position.TOP : Position.BOTTOM,
        size: Size.MEDIUM
      }),
      inverseMediaCircle: false,
      "aria-expanded": open,
      "aria-controls": `${accordionId}-section`,
      id: `${accordionId}-control`,
      onClick: onClick
    }), open && /*#__PURE__*/jsx("div", {
      id: `${accordionId}-section`,
      role: "region",
      "aria-labelledby": `${accordionId}-control`,
      children: /*#__PURE__*/jsx(Body, {
        as: "span",
        type: Typography.BODY_LARGE,
        className: clsx('np-accordion-item__content', 'd-block', {
          'has-icon': icon
        }),
        children: content
      })
    })]
  });
};

export { AccordionItem as default };
//# sourceMappingURL=AccordionItem.mjs.map
