import * as React from 'react'
import {__, _x} from '@wordpress/i18n'

import {
	Modal,
	ExternalLink,
} from '@wordpress/components'

export interface HelpModalProps {
	onRequestClose: () => void
}

const DOCS_URL = `https://ska-blocks.com/docs/`

/**
 * Modal that displays help info.
 */
const HelpModal: React.FC<HelpModalProps> = ({onRequestClose}) => {
	return (
		<Modal
			title={__('ska-blocks help', 'ska-blocks')}
			onRequestClose={onRequestClose}
			style={{maxWidth: 720}}
		>
			<div className='ska-blocks-help'>
				<ExternalLink href={DOCS_URL}>
					{__('Online documentation', 'ska-blocks')}
				</ExternalLink>
			</div>
		</Modal>
	)
}

export default HelpModal