import React from 'react';
import Link from './Link';

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

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

/**
 * @return {jsx} The root component
 */
export default function Banner(
	{title, description, links, image}: BannerProps) {
	let imgUrl;
	if (image.startsWith('/static/images/')) {
		imgUrl = image;
	} else {
		imgUrl = '/static/images/' + image;
	}

	const containerStyle = {
		backgroundImage: `url('` + imgUrl + `')`,
		backgroundPosition: '64% 78%',
		backgroundSize: 'cover',
	};

	const jumbotronStyle = {
		backgroundColor: 'transparent',
	};

	const colorLayer = {
		backgroundColor: '#1279be70',
	};

	return (
		<React.Fragment>
			<div
				className='container-fluid p-0'
				style={containerStyle}>
				<div
					className='container-fluid p-0'
					style={colorLayer}>
					<div
						className='jumbotron container text-white px-0'
						id='banner'
						style={jumbotronStyle}>
						<h1 className='display-4 font-weight-bold'>{title}</h1>
						<div className='h5'>
							{description.split('\n').map((elem, index) =>
								<p key={index}>
									{elem}
								</p>)}
						</div>
						<br />
						{links.map((elem, index) =>
							<p key={index} className='lead mt-2'>
								<Link
									className='btn btn-info btn-lg
										font-weight-bold'
									to={elem.to}
									text={elem.text} />
							</p>)}
					</div>
				</div>
			</div>
		</React.Fragment>
	);
}