import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import androidArrowDownIcon from '../assets/android-arrow-down.svg';
import messages from '../../messages';

const AndroidMobileChromeHeader = ({
  icon,
  selectedBrowser,
  notificationTitle,
  notificationBody,
  brandIcon,
  shouldShowBrandIcon,
}) => (
  <div className="notification-header android-mobile-chrome-header">
    <div className="notification-icon-container">
      <img src={icon} alt={selectedBrowser} className="notification-icon" />
    </div>
    <div className="notification-content android-mobile-chrome-content">
      <div className="notification-title-row">
        <div className="notification-title">{notificationTitle}</div>
        <div className="notification-time">
          <FormattedMessage {...messages.notificationTime} />
        </div>
      </div>
      <div className="notification-body">{notificationBody}</div>
    </div>
    <div className="notification-right-rail">
      {shouldShowBrandIcon && (
        <div className="notification-brand-icon-container android-mobile-chrome-brand-icon">
          <img src={brandIcon} alt="Brand icon" className="notification-brand-icon" />
        </div>
      )}
      <div className="notification-action-arrow android-mobile-chrome-arrow">
        <img src={androidArrowDownIcon} alt="Expand" className="android-mobile-chrome-arrow-icon" />
      </div>
    </div>
  </div>
);

AndroidMobileChromeHeader.propTypes = {
  icon: PropTypes.string.isRequired,
  selectedBrowser: PropTypes.string.isRequired,
  notificationTitle: PropTypes.string,
  notificationBody: PropTypes.string,
  brandIcon: PropTypes.string,
  shouldShowBrandIcon: PropTypes.bool,
};

export default AndroidMobileChromeHeader;

