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

const NotificationExpandedContent = ({
  shouldRenderExpandedMedia,
  shouldShowBrandIconInExpandedMac,
  brandIcon,
  mediaImageUrl,
  enableCtas,
  ctaButtons,
}) => (
  <div className="notification-expanded-content">
    {shouldRenderExpandedMedia && (
      <div className="notification-media">
        {shouldShowBrandIconInExpandedMac ? (
          <img
            src={brandIcon}
            alt="Brand icon"
            className="notification-media-image"
          />
        ) : (
          mediaImageUrl && (
            <img
              src={mediaImageUrl}
              alt="Notification media"
              className="notification-media-image"
            />
          )
        )}
      </div>
    )}

    {enableCtas && ctaButtons && ctaButtons.length > 0 && (
      <div className="notification-actions">
        {ctaButtons.map((button) => (
          <div key={button.id} className="notification-action-item">
            <div className="notification-action-divider"></div>
            <button
              type="button"
              className="notification-action-button"
            >
              <span className="notification-action-label">{button.label}</span>
            </button>
          </div>
        ))}
        {/* Note: OS/Browser adds a "Settings" or "Unsubscribe" button from its side */}
        {/* This could be included later if needed for more accurate preview */}
      </div>
    )}
  </div>
);

NotificationExpandedContent.propTypes = {
  shouldRenderExpandedMedia: PropTypes.bool,
  shouldShowBrandIconInExpandedMac: PropTypes.bool,
  brandIcon: PropTypes.string,
  mediaImageUrl: PropTypes.string,
  enableCtas: PropTypes.bool,
  ctaButtons: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      label: PropTypes.string,
    })
  ),
};

export default NotificationExpandedContent;

