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

const cleanUnfollow = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/clean-unfollow.svg')

import './styles.styl'

interface IUnfollowBlankState {
  handleManageDomainClick: () => void
}

const UnfollowedBlankState = ({ handleManageDomainClick }: IUnfollowBlankState) =>
  <div className="activity-feed-search-blank-state unfollowed">
    <InlineSVG className="empty-search" src={cleanUnfollow} />
    <h5 className="drift-outbound-header-text">Your activity feed is 💯 decluttered!</h5>
    <p className="drift-outbound-p-tag">You’ve cleared your feed by Unfollowing People or Domains. To start seeing activity again, send a tracked email to someone new or remove Domains from your unfollow list.</p>
    <button type="submit" className="drift-outbound-button button-primary"
      onClick={() => handleManageDomainClick()}>
      Manage your Unfollowed Domains
    </button>
    <a className="learn-more-link" target="_blank" href="https://help.drift.com/integrations/using-the-drift-email-extension"><button className="drift-outbound-button button-info">Learn More</button></a>
  </div>

export default UnfollowedBlankState