import React from 'react'
import {RetinaImg} from 'nylas-component-kit'
import OnboardingActions from './onboarding-actions'

export default class SelfHostingRestrictionsPage extends React.Component {
  static displayName = 'SelfHostingRestrictionsPage'

  _onContinue = () => {
    OnboardingActions.moveToPage("self-hosting-setup");
  }

  render() {
    return (
      <div className="page self-hosting">
        <h2>Are you sure?</h2>
        <div className="self-hosting-container">
          <div className="section">
            Some of N1's most powerful features, like snooze, read receipts, and
            send later, require the hosted version of our backend infrastructure.
            These features won't be available while you use N1 with your own sync
            engine.
          </div>
          <div className="section">
            <RetinaImg
              name="pro-plugins.png"
              mode={RetinaImg.Mode.ContentPreserve}
            />
          </div>
        </div>
        <button
          key="next"
          className="btn btn-large btn-gradient"
          onClick={this._onContinue}
        >
          Continue without Nylas Pro features
        </button>
      </div>
    )
  }
}