/**
 * Section
 *
 * Card that groups related settings. Optionally collapsible.
 *
 * @package Everyone_Accessibility_Suite
 */

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

function Section({ title, description, collapsible = false, defaultOpen = true, children }) {
	const [isOpen, setIsOpen] = useState(defaultOpen);
	const open = collapsible ? isOpen : true;

	return (
		<div className={`evas-settings-section ${collapsible ? 'is-collapsible' : ''} ${open ? 'is-open' : ''}`}>
			<div
				className="evas-section-header"
				onClick={() => collapsible && setIsOpen(!isOpen)}
			>
				<div>
					<h3>{title}</h3>
					{description && <p className="evas-section-description">{description}</p>}
				</div>
				{collapsible && (
					<span className={`dashicons dashicons-arrow-${open ? 'up' : 'down'}-alt2`}></span>
				)}
			</div>
			{open && <div className="evas-section-content">{children}</div>}
		</div>
	);
}

export default Section;