import React, { Component } from 'react';
import fullNoTitle from '../images/fullNoTitle.png';
import fullNoTitleForms from '../images/forms/fullNoTitle.png';
import { values } from '../values.config';

class PreviewFull extends Component {
  render() {
    const { backgroundColor, widgetTitle, titleClassName } = this.props;

    let src = fullNoTitle;
    if (values.featureKey === 'maintenanceForms') {
      src = fullNoTitleForms;
    }

    return (
      <div style={styles.container}>
        <p className={titleClassName}>{widgetTitle}</p>
        <img style={{ ...styles.image, backgroundColor }} src={src} alt="fullNoTitle" />
      </div>
    );
  }
}

const styles = {
  container: {
    position: 'relative',
  },
  image: {
    width: '100%',
  },
};

export default PreviewFull;
