Untitled

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import HelpPopover from '../../../../../components/HelpPopover';

const AccordionItem = ({
  itemHeader,
  itemContent,
  containerClass,
  onOpen,
  onClose,
  isDefaultOpen,
}) => {
  const [isOpen, setIsOpen] = useState(isDefaultOpen);
  const toggleAccordion = () => {
    if (isOpen) {
      setIsOpen(false);
      if (onClose) {
        onClose();
      }
    } else {
      setIsOpen(true);
      if (onOpen) {
        onOpen();
      }
    }
  };

  const containerStyle = containerClass
    ? `${containerClass} w-full`
    : 'w-full rounded border-solid border border-[#D9D9D9] shadow-md';

  return (
    <div className={containerStyle}>
      <div
        role="presentation"
        onClick={toggleAccordion}
        className="bg-grey-lighter font-bold p-2 menu-accordion-header-text"
      >
        {itemHeader}
      </div>
      {isOpen && <div className="p-2">{itemContent}</div>}
    </div>
  );
};

AccordionItem.propTypes = {
  itemHeader: PropTypes.element,
  itemContent: PropTypes.element,
  containerClass: PropTypes.string,
  onOpen: PropTypes.func,
  onClose: PropTypes.func,
  isDefaultOpen: PropTypes.bool,
};

AccordionItem.defaultProps = {
  isDefaultOpen: false,
};

export default AccordionItem;