export function CompetitorWatch( { competitor, i18n } ) {
	const items = competitor?.items || [];
	return (
		<div className="nros-competitor nros-bento-card nros-competitor--accent">
			<h3>{ i18n.competitor || 'Competitor watch' }</h3>
			<p className="nros-competitor__sub">{ i18n.competitor_sub }</p>
			<ul className="nros-competitor__list">
				{ items.length === 0 && (
					<li className="nros-competitor__empty">
						{ i18n.no_articles || 'Add competitor RSS feeds in Settings → Site details.' }
					</li>
				) }
				{ items.map( ( item, i ) => (
					<li key={ i } className="nros-competitor__item">
						<div className="nros-competitor__source">{ item.source || 'Feed' }</div>
						<a href={ item.url } target="_blank" rel="noreferrer" className="nros-competitor__title">{ item.title }</a>
						{ item.excerpt && <p className="nros-competitor__excerpt">{ item.excerpt }</p> }
						{ item.ago && <span className="nros-competitor__ago">{ item.ago }</span> }
					</li>
				) ) }
			</ul>
		</div>
	);
}
