/**
 * Static/fallback-visible HowTo markup.
 */

import { useBlockProps } from '@wordpress/block-editor';
import { RawHTML } from '@wordpress/element';
import { buildHowToClassList, buildHowToInnerHtml } 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 = buildHowToInnerHtml(attrs);

	if (!inner) {
		return null;
	}

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

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