import { Sparkline } from './Sparkline';

export function KpiSparkCard( { label, value, unit, badge, badgeTone, spark, sparkColor, href, sub, subClass } ) {
	const inner = (
		<>
			<div className="nros-kpi-card__top">
				<span className="nros-kpi-card__label">{ label }</span>
				{ badge != null && (
					<span className={ `nros-kpi-card__badge nros-kpi-card__badge--${ badgeTone || 'neutral' }` }>{ badge }</span>
				) }
			</div>
			<div className="nros-kpi-card__body">
				<div className="nros-kpi-card__val">
					{ value }{ unit && <span className="nros-kpi-card__unit">{ unit }</span> }
				</div>
				{ spark && spark.length > 1 && (
					<div className="nros-kpi-card__spark">
						<Sparkline data={ spark } color={ sparkColor || '#6366f1' } />
					</div>
				) }
			</div>
			{ sub && <div className={ `nros-kpi-card__sub ${ subClass || '' }` }>{ sub }</div> }
		</>
	);
	if ( href ) {
		return <a href={ href } className="nros-kpi-card nros-kpi-card--link">{ inner }</a>;
	}
	return <div className="nros-kpi-card">{ inner }</div>;
}
