export function Sparkline( { data = [], color = '#6366f1', height = 36 } ) {
	const points = ( data || [] ).map( ( v ) => Number( v ) || 0 );
	if ( points.length < 2 ) {
		return null;
	}
	const w = 80;
	const h = height;
	const max = Math.max( ...points, 1 );
	const min = Math.min( ...points, 0 );
	const range = max - min || 1;
	const coords = points.map( ( v, i ) => {
		const x = ( i / ( points.length - 1 ) ) * w;
		const y = h - ( ( ( v - min ) / range ) * ( h - 4 ) ) - 2;
		return `${ x },${ y }`;
	} );
	const line = coords.join( ' ' );
	const area = `0,${ h } ${ line } ${ w },${ h }`;
	return (
		<svg className="nros-sparkline" viewBox={ `0 0 ${ w } ${ h }` } width={ w } height={ h } aria-hidden="true">
			<defs>
				<linearGradient id={ `spark-${ color.replace( '#', '' ) }` } x1="0" y1="0" x2="0" y2="1">
					<stop offset="0%" stopColor={ color } stopOpacity="0.35" />
					<stop offset="100%" stopColor={ color } stopOpacity="0" />
				</linearGradient>
			</defs>
			<polygon fill={ `url(#spark-${ color.replace( '#', '' ) })` } points={ area } />
			<polyline fill="none" stroke={ color } strokeWidth="1.5" points={ line } />
		</svg>
	);
}
