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

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

    let src = previewWidget;
    if (values.featureKey === 'maintenanceForms') {
      src = previewWidgetForms;
    }

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

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

export default PreviewWidget;
