import React from 'react';

interface Image {
	image: string;
	title: string;
	description: string;
}

interface imagesWithDescriptionProps {
    images: Array<Image>;
}

/**
 * @return {jsx} The root component
 */
export default function ImagesWithDescription(
	{images}: imagesWithDescriptionProps) {
	return (
		<React.Fragment>
			<div className='container w-50 d-flex justify-content-between'>
				{images.map((elem, index) =>
					<div
						key={index}
						id='imagewithdescription'
						className='align-top'>
						<img
							src={'/static/images/' + elem.image}
							className='rounded mb-3'
							id='smallimage'></img>
						<h3 className='font-weight-bold'>
							{elem.title}
						</h3>
						<p>{elem.description}</p>
					</div>)}
			</div>
		</React.Fragment>
	);
}