import React from 'react';
import PropTypes from 'prop-types';
import windowsTripleDotIcon from '../assets/windows-triple-dot-icon.svg';
import windowsCloseIcon from '../assets/windows-close-icon.svg';

const WindowsChromeExpanded = ({
  icon,
  brandIcon,
  enableBrandIconPreview,
  notificationTitle,
  notificationBody,
  displayUrl,
  browserName = 'Google Chrome',
  mediaImageUrl = '',
  enableCtas = false,
  ctaButtons = [],
}) => (
  <div className="windows-chrome-expanded-wrapper">
    {mediaImageUrl && (
      <div className="windows-chrome-banner">
        <img
          src={mediaImageUrl}
          alt="Notification banner"
          className="windows-chrome-banner-image"
        />
      </div>
    )}

    <div className="windows-chrome-body">
      <div className="windows-chrome-header-row">
        <div className="notification-icon-container windows-chrome-browser-icon">
          {/* Inline style kept: Ensures browser icon img fills container; SCSS only styles container, not img element */}
          <img src={icon} alt="Chrome browser" className="notification-icon" style={{ width: '100%', height: '100%' }} />
        </div>
        <div className="windows-chrome-browser-title">{browserName}</div>
        <div className="windows-chrome-header-actions">
          <span className="windows-chrome-menu-text">
            <img src={windowsTripleDotIcon} alt="Menu" className="windows-chrome-menu-icon" />
          </span>
          <span className="windows-chrome-close-text">
            <img src={windowsCloseIcon} alt="Close" className="windows-chrome-close-icon" />
          </span>
        </div>
      </div>

      <div className="windows-chrome-content-row">
        {enableBrandIconPreview && Boolean(brandIcon) && (
          <div className="notification-brand-icon-container windows-chrome-brand-icon">
            <img
              src={brandIcon}
              alt="Brand icon"
              className="notification-brand-icon"
            />
          </div>
        )}
        <div className="windows-chrome-text-block">
          <div className="windows-chrome-title">{notificationTitle}</div>
          <div className="windows-chrome-body-text">{notificationBody}</div>
          <div className="windows-chrome-url">{displayUrl}</div>
        </div>
      </div>

      {enableCtas && ctaButtons && ctaButtons.length > 0 && (
        <div className="windows-chrome-cta-container">
          {ctaButtons.map((button) => (
            <button
              key={button.id}
              type="button"
              className={`windows-chrome-cta-button ${ctaButtons.length === 1 ? 'windows-chrome-cta-button-single' : ''}`}
            >
              <span className="windows-chrome-cta-button-text">{button.label}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  </div>
);

WindowsChromeExpanded.propTypes = {
  icon: PropTypes.string.isRequired,
  brandIcon: PropTypes.string,
  enableBrandIconPreview: PropTypes.bool,
  notificationTitle: PropTypes.string,
  notificationBody: PropTypes.string,
  displayUrl: PropTypes.string,
  browserName: PropTypes.string,
  mediaImageUrl: PropTypes.string,
  enableCtas: PropTypes.bool,
  ctaButtons: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      label: PropTypes.string,
    })
  ),
};

export default WindowsChromeExpanded;

