import React from 'react';

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

interface NavbarProps {
	main: Link;
	sub: Array<Link>;
}

/**
 * @return {jsx} The root component
 */
export default function Navbar({main, sub}: NavbarProps) {
	return (
		<React.Fragment>
			<div className='navbar navbar-expand-lg navbar-light'>
				<div
					className='container'
					id='navbar'>
					<a className='navbar-brand' href={main.to}>{main.text}</a>
					<button
						className='navbar-toggler'
						type='button'
						data-toggle='collapse'
						data-target='#navbar'
						aria-controls='navbar'>
						<span className='navbar-toggler-icon'></span>
					</button>
					<div className='collapse navbar-collapse' id='navbar'>
						<ul className='navbar-nav mr-auto mb-0 pb-0'>
							{sub.map((elem, index) =>
								<li key={index} className='nav-item'>
									<a className='nav-link' href={elem.to}>
										{elem.text}
									</a>
								</li>)
							}
						</ul>
					</div>
				</div>
			</div>
		</React.Fragment>
	);
}