import { createElement, Component, useContext } from '@wordpress/element'
import DashboardContext from './context'
import { sprintf, __ } from 'ct-i18n'

const Heading = () => {
	const { theme_name } = useContext(DashboardContext)

	return (
		<div>
			<h2>
				<svg width="20" height="20" viewBox="0 0 300 300">
					<path d="M298.4,83.9c9.5-52.9-24.3-81.8-85.3-81.8H59.2c-5.2,0-9.7,3.8-10.6,8.9L0.2,285.3c-1.2,6.6,3.9,12.6,10.6,12.6h162.4c76.9,0,105.1-37.4,111.8-74.8c6-33.5-4.6-65.9-38.1-78.3C277.6,132.2,293.5,112.1,298.4,83.9z M128.1,240l13.8-75H97l74.9-105l-13.8,75H203L128.1,240z"/>
				</svg>

				{sprintf(__('%s'), theme_name)}
			</h2>
			<p>
				{__(
					`The most innovative, lightning fast and super charged WordPress theme`
				)}
			</p>
		</div>
	)
}

export default Heading