import * as React from 'react'
import InlineSVG from 'svg-inline-react'

const logo = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../img/svg/drift-logo-circle-white.svg')

import './styles.styl'

const TakeForSpin = ({}) => {
  return (
    <div className="drift-onboarding-take-for-spin">
    <InlineSVG className="drift-popup-logo" src={logo} />
    <h3 className="drift-popup-header">Take it for a spin</h3>
    <p className="drift-outbound-p-tag">Send your first Drift email to automatically greet people with a personalized message when they visit your site.</p>
    <button type="submit" className="drift-outbound-button button-primary"
      onClick={() => {
        window.parent.postMessage({ type: '@@driftext/toggle_onboarding', visible: false }, '*')
        window.parent.postMessage({ type: '@@driftext/send_test_email' }, '*')
      }}>
    Send a test email with Drift
  </button>
    <a className="login-account-info-text drift-outbound-login-page-link"
      onClick={() => {
        window.parent.postMessage({ type: '@@driftext/toggle_onboarding', visible: false }, '*')
      }}>Not right now</a>
  </div>
  )
}

export default TakeForSpin