import {
	useState
} from '@wordpress/element';


import { __ } from '@wordpress/i18n';

type Props = {
	title: string,
	children: React.ReactNode,
	isOpened?: boolean,
	type?: string,
}


export default function Accordion({ title, children, isOpened, type }: Props) {
	const [isOpen, setIsOpen] = useState<boolean>(isOpened || false);

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

	// typeが指定されている場合はクラス名に追加
	let className = isOpen ? 'apura-accordion is-active' : 'apura-accordion';
	if (type) {
		className += ` apura-accordion--${type}`;
	}

	return (
		<div className={className}>
			<div
				className='apura-accordion__title'
				onClick={toggleAccordion}
				tabIndex={0} // キーボード操作のためにフォーカス可能にする場合
			>
				{title}
			</div>

			<div
				className='apura-accordion__body'
				style={{ display: isOpen ? 'block' : 'none' }} // 表示/非表示をCSSで制御
			>
				{children}
			</div>

		</div>
	);
}