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 SuperDope = ({}) => {
  return (
    <div className="drift-onboarding-super-dope">
    <InlineSVG className="drift-popup-logo" src={logo} />
    <h3 className="drift-popup-header">Nice! 🎉 Now keep an eye out </h3>
    <p className="drift-outbound-p-tag">You sent your first tracked email with Drift! Keep an eye out for a browser notification when your email is opened.</p>
    <button type="submit" className="drift-outbound-button button-primary"
      onClick={() => {
        window.parent.postMessage({ type: '@@driftext/toggle_onboarding', visible: false }, '*')
      }}>
      Okay, got it!
  </button>
  </div>
  )
}

export default SuperDope