export function ChannelBreakdown( { bars, i18n } ) {
	return (
		<section className="nros-bento-card">
			<h3>{ i18n.channels }</h3>
			<ul className="nros-channel-bars">
				{ ( bars || [] ).map( ( row ) => (
					<li key={ row.key } className="nros-channel-bar">
						<div className="nros-channel-bar__head">
							<span>{ row.label }</span>
							<span>{ row.clicks } { i18n.clicks } · { row.ctr }% { i18n.ctr }</span>
						</div>
						<div className="nros-channel-bar__track">
							<div className="nros-channel-bar__fill" style={ { width: `${ row.pct || 0 }%` } } />
						</div>
					</li>
				) ) }
			</ul>
		</section>
	);
}
