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

/**
 * Inline, collapsed-by-default explanation.
 *
 * A settings screen has to answer two different readers: the one who already
 * knows what a canonical is and wants the control, and the one who is about to
 * change something they do not understand. Putting the second reader's answer
 * behind a disclosure serves both — the page stays short, and nobody has to
 * leave it to find out what a setting does.
 *
 * Native <details> so it works without JavaScript state, is keyboard-operable
 * for free, and is found by the browser's in-page search even when collapsed.
 */
export default function Explain({ title = __('What does this do?', 'ai-rank-suite'), children, open = false }) {
	return (
		<details className="ars-disclosure" open={open}>
			<summary>{title}</summary>
			<div className="ars-disclosure-body">{children}</div>
		</details>
	);
}