/**
 * Escape text for HTML text nodes.
 *
 * @param {string} value Raw.
 * @return {string} Escaped.
 */
export function escapeHtml(value) {
	return String(value || '')
		.replace(/&/g, '&amp;')
		.replace(/</g, '&lt;')
		.replace(/>/g, '&gt;')
		.replace(/"/g, '&quot;')
		.replace(/'/g, '&#039;');
}

/**
 * Build static/fallback-visible inner HTML for the Quick Answer block.
 *
 * @param {Object} attributes Block attributes.
 * @return {string} Inner HTML (without outer aside wrapper).
 */
export function buildQuickAnswerInnerHtml(attributes = {}) {
	const label = String(attributes.label || '').trim();
	const answer = String(attributes.answer || '').trim();
	if (!answer) {
		return '';
	}
	const labelHtml = label
		? `<p class="seovault-quick-answer-block__label">${escapeHtml(label)}</p>`
		: '';
	return `${labelHtml}<p class="seovault-quick-answer-block__answer">${escapeHtml(answer)}</p>`;
}

/**
 * Class list for the saved/rendered wrapper.
 *
 * @param {Object} attributes Attributes.
 * @return {string[]} Classes.
 */
export function buildQuickAnswerClassList(attributes = {}) {
	const {
		stylePreset = 'clean',
		colorPreset = 'blue',
		density = 'comfortable',
	} = attributes;

	return [
		'seovault-quick-answer-block',
		`seovault-quick-answer-block--style-${stylePreset}`,
		`seovault-quick-answer-block--color-${colorPreset}`,
		`seovault-quick-answer-block--density-${density}`,
	];
}
