import React, { FC, useState } from "react";
import { CSSTransition } from "react-transition-group";
import { FaChevronDown, FaChevronUp } from "react-icons/fa";

type AccordionArgs = {
	title : string,
	children : React.ReactNode,
}

const Accordion : FC<AccordionArgs> = ({ title, children }): JSX.Element => {
	const [isOpen, setIsOpen] = useState(false);

	const toggleAccordion = (): void => {
		setIsOpen(!isOpen);
	};

	return (
		<div className="accordion">
			<div className="accordion-header" onClick={toggleAccordion}>
				<h2>{title}</h2>
				<span className="accordion-icon">
					{isOpen ? <FaChevronUp /> : <FaChevronDown />}
				</span>
			</div>
			<CSSTransition in={isOpen} timeout={0} classNames="accordion-content" unmountOnExit>
				<div className="accordion-content">{children}</div>
			</CSSTransition>
		</div>
	);
};

export default Accordion;
