import * as React from 'react'

import './styles.styl'

import InlineSVG from 'svg-inline-react'
const emptyStateSvg = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/search-empty.svg')
const domainEmpty = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/domain-empty.svg')

interface ISearchBlankState {
  searchEmpty: boolean
  noDomains: boolean
}

const SearchBlankState = ({ searchEmpty, noDomains }: ISearchBlankState): JSX.Element => {
  const text = noDomains
    ? {
      header: 'No Unfollowed Domains',
      subtitle: 'Stay focused by only seeing the activity most important to you. When you unfollow Domains to remove their activity from your feed, they’ll appear here.',
    }
    : {
      header: 'No results found',
      subtitle: 'We couldn’t find anything that matched your filters. Don’t worry though, try a different search and we’ll give it another shot!',
    }

  return (
      <div className="activity-feed-search-blank-state">
      <InlineSVG className="empty-search" src={noDomains ? domainEmpty : emptyStateSvg} />
        <h5 className="drift-outbound-header-text">{text.header}</h5>
        <p className="drift-outbound-p-tag">{text.subtitle}</p>
      </div>
  )
}

export default SearchBlankState