/**
 * Live Preview - Google-style rich snippet preview.
 *
 * @package Schema_AI
 */

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

function LivePreview( { schema } ) {
	if ( ! schema ) return null;

	const type = schema[ '@type' ] || '';
	const title = schema.headline || schema.name || '';
	const url = schema.url || '';
	const description = schema.description || '';
	const rating = schema.aggregateRating;
	const price = schema.offers?.price;
	const currency = schema.offers?.priceCurrency || 'USD';

	return (
		<div className="schema-ai-live-preview">
			<h3>{ __( 'Google Search Preview', 'schema-ai' ) }</h3>
			<div className="schema-ai-preview-card">
				<div className="schema-ai-preview-url">{ url }</div>
				<div className="schema-ai-preview-title">{ title || __( 'Page Title', 'schema-ai' ) }</div>
				{ rating && (
					<div className="schema-ai-preview-rating">
						<span className="schema-ai-preview-stars">{ '\u2605'.repeat( Math.round( parseFloat( rating.ratingValue ) || 0 ) ) }</span>
						<span>{ ` ${ rating.ratingValue } (${ rating.reviewCount || 0 } reviews)` }</span>
					</div>
				) }
				{ price && (
					<div className="schema-ai-preview-price">{ `${ currency } ${ price }` }</div>
				) }
				<div className="schema-ai-preview-description">{ description || __( 'Page description will appear here...', 'schema-ai' ) }</div>
				<div className="schema-ai-preview-type-badge">{ type }</div>
			</div>
		</div>
	);
}

export default LivePreview;