import React from 'react';

interface QuoteProps {
	quote: string;
	author: string;
	description: string;
}

/**
 * @return {jsx} The root component
 */
export default function Quote(
	{quote, author, description}: QuoteProps) {
	const containerStyle = {
		backgroundColor: '#f7f7f7',
	};

	return (
		<React.Fragment>
			<div
				className='container-fluid p-5'
				style={containerStyle}>
				<div
					className='container
						w-75 d-flex justify-content-center align-items-center'>
					<blockquote className="blockquote mx-5">
						<p className="mb-0">{quote}</p>
						<footer className="blockquote-footer">{author}</footer>
					</blockquote>
					<div className='lead w-25 mx-5'>{description}</div>
				</div>
			</div>
		</React.Fragment>
	);
}