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 Success = () => {
  return (
    <div className="drift-onboarding-take-for-spin">
      <InlineSVG className="drift-popup-logo" src={logo} />
      <h3 className="drift-popup-header">Success</h3>
      <p className="drift-outbound-p-tag">
        Great! Now you can start tracking your emails and sending Drift Sequences.
      </p>
      <button type="submit" className="drift-outbound-button button-primary"
        onClick={() => {
          window.parent.postMessage({ type: '@@driftext/toggle_onboarding', visible: false }, '*')
        }}
      >
        Done
      </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 Success