import PropTypes from 'prop-types'
import React from 'react'
import { FormattedMessage } from 'react-intl'
import styled from 'styled-components'

import ErrorMessage from '../form/error-message'
import Icon from '../util/icon'

import EditSearchButton from './edit-search-button'

/**
 * This component is used on mobile views to
 * render an error message if no results are found.
 */
const ResultsError = ({ className, error }) => {
  return (
    <div className={`results-error-message ${className}`}>
      <ErrorMessage error={error} />
      <div className='options-lower-tray mobile-padding'>
        <EditSearchButton
          className='back-to-search-button'
          style={{ width: '100%' }}
        >
          <Icon className='fa fa-arrow-left' type='arrow-left' withSpace />
          <FormattedMessage id='components.ResultsError.backToSearch' />
        </EditSearchButton>
      </div>
    </div>
  )
}

ResultsError.propTypes = {
  error: PropTypes.object
}

const StyledResultsError = styled(ResultsError)`
  top: 300px;
`

export default StyledResultsError

@@ -430,24 +430,11 @@
 ) =%3E
- %7B%0A  return
  (%0A
-  
   %3Cd
@@ -490,18 +490,16 @@
 %60%7D%3E%0A    
-  
 %3CErrorMe
@@ -517,26 +517,24 @@
 =%7Berror%7D /%3E%0A
-  
     %3Cdiv cla
@@ -583,18 +583,16 @@
 %3E%0A      
-  
 %3CEditSea
@@ -601,18 +601,16 @@
 hButton%0A
-  
         
@@ -651,18 +651,16 @@
         
- 
- 
 style=%7B%7B
@@ -687,14 +687,10 @@
     
-  %3E%0A  
+%3E%0A
     
@@ -767,18 +767,16 @@
         
- 
- 
 %3CFormatt
@@ -836,18 +836,16 @@
 %3E%0A      
-  
 %3C/EditSe
@@ -860,21 +860,8 @@
 on%3E%0A
-      %3C/div%3E%0A
     
@@ -873,11 +873,16 @@
 %3E%0A  
-)%0A%7D
+%3C/div%3E%0A)
 %0A%0ARe

Revert results-error changes