import React from 'react';
import reduxLang from '../../middleware/lang';

const sponsors = [
	'01_Lotteriefonds_BE.svg',
	'02_Kulturstiftung.svg',
	'03_Kanton_Bern.svg',
	'04_Burgergemeinde_Bern.svg',
	'05_SAC.svg',
	'06_Binding_Stiftung.svg',
	'07_Mobiliar.svg',
	'08_Pro_Patria.svg',
	'09_Swiss_Ski.svg'
];

const Sponsors = ({ t }) => (
	<div className='InfoView-sponsors'>
		<div className='CVForm innovationspartner'>
			<label>{t('innovation_partner')}</label>
			<div className='InfoView-sponsors--items'>
				<div className='InfoView-sponsors--item'>
					<img src='/static/gfx/sponsors/Engagement_Migros.svg' />
				</div>
			</div>
			<p className='small-text' dangerouslySetInnerHTML={{ __html: t('migros_text') }}></p>
		</div>
		<div className='CVForm'>
			<label>{t('project_partner')}</label>
			<div className='InfoView-sponsors--items'>
				{sponsors.map((sponsor, i) => (
					<div className='InfoView-sponsors--item' key={i}>
						<img src={`/static/gfx/sponsors/${sponsor}`} />
					</div>
				))}
			</div>
		</div>
	</div>
);
export default reduxLang('Sponsors')(Sponsors);