import React from 'react';

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

interface Card {
	title: string;
	description: any;
	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
				py-5 d-flex flex-wrap justify-content-between'>
				{elements.map((elem, index) =>
					<div
						key={index}
						className='align-top'>
						<h3 className='font-weight-bold'>
							{elem.title}
						</h3>
						<p>{elem.description}</p>
						{elem.links.map((link, i) =>
							<div key={i}>
								<a href={link.to}>
									{link.text}
								</a>
								<br/>
							</div>)}
					</div>)}
			</div>
		</React.Fragment>
	);
}
