import React from 'react';
import PropTypes from 'prop-types';
import macosTripleDotIcon from '../assets/macos-triple-dot-icon.svg';
import macosArrowDownIcon from '../assets/macos-arrow-down-icon.svg';

const NotificationHeader = ({
  icon,
  selectedBrowser,
  notificationTitle,
  displayUrl,
  notificationBody,
  shouldShowBrandIcon,
  brandIcon,
  isExpanded,
}) => (
  <div className="notification-header">
    {/* Left rail: browser icon */}
    <div className="notification-icon-container">
      <img src={icon} alt={selectedBrowser} className="notification-icon" />
    </div>

    {/* Center rail: notification text (title, url, body) */}
    <div className="notification-content">
      <div className="notification-title">{notificationTitle}</div>
      <div className="notification-url">{displayUrl}</div>
      <div className="notification-body">{notificationBody}</div>
    </div>

    {/* Right rail: optional brand icon (macOS + Chrome, collapsed only) */}
    {shouldShowBrandIcon && (
      <div className="notification-brand-icon-container">
        <img src={brandIcon} alt="Brand icon" className="notification-brand-icon" />
      </div>
    )}
    {/* Menu and expand/collapse icons - shown in macOS + Chrome expanded notification */}
    {isExpanded && (
      <div className="notification-header-actions">
        <div className="notification-action-menu">
          <img src={macosTripleDotIcon} alt="Menu" className="notification-action-menu-icon" />
        </div>
        <div className="notification-action-arrow">
          <img src={macosArrowDownIcon} alt="Expand/Collapse" className="notification-action-arrow-icon" />
        </div>
      </div>
    )}
  </div>
);

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

export default NotificationHeader;

