Accordion

// AccordionComponent.js
import React from 'react';

function AccordionComponent({ items }) {
  return (
    <div className="accordion" id="accordionExample2">
      {items.map((item, index) => (
        <div key={index} className="accordion-item">
          <h2 className="accordion-header">
            <button
              className={`accordion-button ${item.collapsed ? 'collapsed' : ''}`}
              type="button"
              data-bs-toggle="collapse"
              data-bs-target={`#accordion00${index + 1}`}
              aria-expanded={item.collapsed ? 'false' : 'true'}
            >
              {item.icon && <ion-icon name={item.icon} role="img" className="md hydrated" aria-label={item.icon}></ion-icon>}
              {item.label}
            </button>
          </h2>
          <div
            id={`accordion00${index + 1}`}
            className={`accordion-collapse collapse ${item.collapsed ? '' : 'show'}`}
            data-bs-parent="#accordionExample2"
          >
            <div className="accordion-body">{item.content}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

export default AccordionComponent;

// YourMainComponent.js
import React from 'react';
import AccordionComponent from './AccordionComponent'; // Assuming this is the path to your AccordionComponent

function YourMainComponent() {
  // Sample accordion items for demonstration
  const accordionItems = [
    { label: 'Item 1', icon: 'wallet-outline', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at augue eleifend, lacinia ex quis, condimentum erat. Nullam a ipsum lorem.' },
    { label: 'Item 2', icon: 'card-outline', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at augue eleifend, lacinia ex quis, condimentum erat. Nullam a ipsum lorem.' },
    { label: 'Item 3', icon: 'cash-outline', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at augue eleifend, lacinia ex quis, condimentum erat. Nullam a ipsum lorem.' },
  ];

  return (
    <div>
      <AccordionComponent items={accordionItems} />
    </div>
  );
}

export default YourMainComponent;