text: import React from 'react'
  import {Link} from 'react-router-dom'
  
  import messages from 'lib/text'
  import style from './style.css'
  
  import Paper from 'material-ui/Paper';
  import RaisedButton from 'material-ui/RaisedButton';
  import Divider from 'material-ui/Divider';
  import FontIcon from 'material-ui/FontIcon';
  
  const ServiceDescription = ({ service, loadingEnableDisable, enableService, disableService }) => {
    if(service){
      return (
        <div style={{ maxWidth: 720, width: '100%' }}>
          <Paper className="paper-box" zDepth={1}>
            <div className={style.innerBox}>
              <div className="row">
                <div className="col-xs-4">
                  <img src={service.cover_url} alt={service.name} className={style.cover} />
                </div>
                <div className="col-xs-8">
                  <h1 className={style.title}>{service.name}</h1>
                  <div className={style.developer}>{service.developer.name}</div>
                  {!service.enabled &&
                    <RaisedButton label={messages.enable} primary={true} disabled={loadingEnableDisable} onClick={enableService} />
                  }
                  {service.enabled &&
                    <RaisedButton label={messages.disable} disabled={loadingEnableDisable} onClick={disableService} />
                  }
                </div>
              </div>
              <div
                className={style.description}
                dangerouslySetInnerHTML={{ __html: service.description }}>
              </div>
            </div>
          </Paper>
        </div>
      )
    } else {
      return null;
    }
  }
  
  export default ServiceDescription;
  