/**
 * Reusable metric display — value + delta with directional arrow.
 */
export function MetricCard( { label, value, delta, invert = false, format = 'number' } ) {
	let displayValue = value;

	if ( format === 'percent' && typeof value === 'number' ) {
		displayValue = ( value * 100 ).toFixed( 1 ) + '%';
	} else if ( format === 'percent_raw' && typeof value === 'number' ) {
		displayValue = value.toFixed( 1 ) + '%';
	} else if ( format === 'decimal' && typeof value === 'number' ) {
		displayValue = value.toFixed( 1 );
	} else if ( format === 'number' && typeof value === 'number' ) {
		displayValue = value.toLocaleString();
	}

	let deltaEl = null;

	if ( delta != null && typeof delta === 'number' && delta !== 0 ) {
		const isPositive = invert ? delta < 0 : delta > 0;
		const arrow = isPositive ? '\u25B2' : '\u25BC';
		const cls = isPositive ? 'repivot-delta--positive' : 'repivot-delta--negative';

		deltaEl = (
			<span className={ `repivot-metric-delta ${ cls }` }>
				{ arrow } { Math.abs( delta ).toFixed( 1 ) }%
			</span>
		);
	}

	return (
		<div className="repivot-metric-card">
			<span className="repivot-metric-label">{ label }</span>
			<span className="repivot-metric-value">{ displayValue ?? '\u2014' }</span>
			{ deltaEl }
		</div>
	);
}