import React from 'react';
import {
  Accordion,
  AccordionItem,
  AccordionItemHeading,
  AccordionItemButton,
  AccordionItemPanel,
} from 'react-accessible-accordion';
import 'react-accessible-accordion/dist/fancy-example.css';

export const BasicAccordionItem = ({ title, children }) => {
  return (
    <React.Fragment>
      <AccordionItem>
        <AccordionItemHeading>
          <AccordionItemButton>{title}</AccordionItemButton>
        </AccordionItemHeading>
        <AccordionItemPanel>{children}</AccordionItemPanel>
      </AccordionItem>
    </React.Fragment>
  );
};

export const AccordionWrapper = ({ children }) => {
  return (
    <React.Fragment>
      <Accordion allowZeroExpanded={true}>{children}</Accordion>
    </React.Fragment>
  );
};
