import React from 'react';

interface Link {
	to: string;
	text: string;
}

interface Card {
	title: string;
	description: string;
	links: Array<Link>;
}

interface FooterProps {
    elements: Array<Card>;
}

/**
 * @return {jsx} The root component
 */
export default function Footer(
	{elements}: FooterProps) {
	return (
		<React.Fragment>
			<div className='container w-50 py-5 d-flex justify-content-between'>
				{elements.map((elem, index) =>
					<div
						key={index}
						id='imagewithdescription'
						className='align-top'>
						<h3 className='font-weight-bold'>
							{elem.title}
						</h3>
						<p
							dangerouslySetInnerHTML=
								{{__html: elem.description}}></p>
						{elem.links.map((link, i) =>
							<div key={i}>
								<a href={link.to}>
									{link.text}
								</a>
								<br/>
							</div>)}
					</div>)}
			</div>
		</React.Fragment>
	);
}