/**
 * Rich Results Chart - simple CSS-based charts.
 *
 * @package Schema_AI
 */

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

function RichResultsChart( { data } ) {
	if ( ! data || ! data.length ) {
		return <p>{ __( 'No data available.', 'schema-ai' ) }</p>;
	}

	const maxValue = Math.max( ...data.map( ( d ) => d.value ) );

	return (
		<div className="schema-ai-chart">
			<h3>{ __( 'Schemas by Type', 'schema-ai' ) }</h3>
			<div className="schema-ai-bar-chart">
				{ data.map( ( item, i ) => (
					<div key={ i } className="schema-ai-bar-row">
						<span className="schema-ai-bar-label">{ item.label }</span>
						<div className="schema-ai-bar-track">
							<div className="schema-ai-bar-fill" style={ { width: `${ maxValue > 0 ? ( item.value / maxValue ) * 100 : 0 }%` } }></div>
						</div>
						<span className="schema-ai-bar-value">{ item.value }</span>
					</div>
				) ) }
			</div>
		</div>
	);
}

export default RichResultsChart;