import React from 'react';
import PropTypes from 'prop-types';

/**
 * iOS/iPadOS Notification Header Component
 * 
 * Displays a simple notification header for iOS and iPadOS devices.
 * Layout: Browser icon | Title "now" | Body text
 * 
 * Note: iOS/iPadOS notifications do NOT show:
 * - Brand icon
 * - URL/domain
 * - CTA buttons
 * - Media images
 * - Expanded state
 */
const IOSHeader = ({
  icon,
  selectedBrowser,
  notificationTitle,
  notificationBody,
}) => (
  <div className="notification-header ios-header">
    <div className="notification-icon-container">
      <img src={icon} alt={selectedBrowser} className="notification-icon" />
    </div>
    <div className="notification-content ios-content">
      <div className="notification-title-row">
        <div className="notification-title">{notificationTitle}</div>
        <div className="notification-time">now</div>
      </div>
      <div className="notification-body">{notificationBody}</div>
    </div>
  </div>
);

IOSHeader.propTypes = {
  icon: PropTypes.string.isRequired,
  selectedBrowser: PropTypes.string.isRequired,
  notificationTitle: PropTypes.string,
  notificationBody: PropTypes.string,
};

export default IOSHeader;

