/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/button-has-type */
import styles from './HelpTab.module.scss';

const HelpTab = (props: { container: string }): JSX.Element => {
	const articles: { title: string; text: string }[] = [
		{
			title: 'Article 1',
			text:
				'Lorem ipsum dolor sit amet,' +
				'consectetur adipiscing elit. Curabitur convallis,' +
				'magna ut tristique sollicitudin, '
		},
		{
			title: 'Article 2',
			text:
				'Lorem ipsum dolor sit amet,' +
				'consectetur adipiscing elit. Curabitur convallis,' +
				'magna ut tristique sollicitudin, '
		}
	];
	return (
		<div className={props.container}>
			<header className={styles.headerHelpTab}>
				<h6>Quick Help</h6>
				<button
					onClick={() => {
						console.log('close button');
					}}
				>
					x
				</button>
			</header>
			<main>
				<div className={styles.suggestedArticles}>
					<h6>Suggested Articles</h6>
					<ul>
						{articles.map((item, idx) => (
							// eslint-disable-next-line react/no-array-index-key
							<li key={idx}>
								<p>{item.title}</p>
								<p>{item.text}</p>
							</li>
						))}
					</ul>
				</div>
			</main>
		</div>
	);
};

export default HelpTab;