/* eslint-disable */
import React, { useState } from 'react';
import './Accordion.scss';

interface AccordionProps {
  title: React.ReactNode;
  children: React.ReactNode;
  onclick?: () => void;
  key?: number;
}

export const Accordion: React.FC<AccordionProps> = ({
  title,
  children,
  onclick = () => {},
  key,
}): JSX.Element => {
  const [isHide, setIsHide] = useState<boolean>(true);

  const handleClick = (): void => {
    if (isHide) {
      setIsHide(false);
    } else {
      setIsHide(true);
    }
  };

  return (
    <>
      <div
        className='accordion-wrapper'
        key={key}
      >
        <div
          className='accordion-header'
          onClick={() => {
            onclick();
            handleClick();
          }}
        >
          {title}
        </div>
        <div
          className={
            !isHide
              ? 'accordion-body'
              : 'accordion-body hide-accordion-animation'
          }
        >
          {children}
        </div>
      </div>
    </>
  );
};
