import { __ } from '@wordpress/i18n';
import { HeadsetIcon } from './Welcome';

const TEXT_DOMAIN = 'stock-sync-with-google-sheet-for-woocommerce';

// The "Get Free Setup Help!" card beside the wizard (setup/base.php).
const HelpSidebar = () => (
	<aside className="ssgs-setup-sidebar">
		<div className="ssgs-help-card">
			<div className="ssgs-help-icon-wrapper">
				<HeadsetIcon size={ 24 } />
			</div>
			<h3>{ __( 'Get Free Setup Help!', TEXT_DOMAIN ) }</h3>
			<p>{ __( 'Book a quick 10-minute setup call - our team will walk you through everything.', TEXT_DOMAIN ) }</p>
			<a target="_blank" rel="noreferrer" href="https://wppooldev.neetocal.com/meeting-with-flexstock-support" className="ssgs-help-btn">
				<span className="dashicons dashicons-phone" aria-hidden="true"></span> { __( 'Book a Free Setup Call →', TEXT_DOMAIN ) }
			</a>
		</div>
	</aside>
);

export default HelpSidebar;