/**
 * Static/fallback-visible Quick Answer markup.
 *
 * Remains readable without the plugin or JavaScript.
 */

import { useBlockProps } from '@wordpress/block-editor';
import { RawHTML } from '@wordpress/element';
import {
	buildQuickAnswerClassList,
	buildQuickAnswerInnerHtml,
} from './utils/serialize';

/**
 * @param {Object} props
 * @param {Object} props.attributes
 * @return {JSX.Element|null} Saved markup.
 */
export default function save({ attributes }) {
	const attrs = attributes || {};
	const schemaVersion = attrs.schemaVersion || 1;
	const inner = buildQuickAnswerInnerHtml(attrs);
	if (!inner) {
		return null;
	}

	const blockProps = useBlockProps.save({
		className: buildQuickAnswerClassList(attrs).join(' '),
		'data-seovault-block': 'quick-answer',
		'data-schema-version': String(schemaVersion),
	});

	return (
		<aside {...blockProps}>
			<RawHTML>{inner}</RawHTML>
		</aside>
	);
}
