import React from 'react';
import styles from './NotificationModal.module.css';

interface NotificationModalProps {
  isVisible: boolean;
  title: string;
  message: string;
  isLoading?: boolean;
  promptText?: string;
  onGalleryClick: () => void;
  onContinueClick: () => void;
  showGalleryButton?: boolean; // Параметр для управления видимостью кнопки "В галерею"
  showButtons?: boolean; // Новый параметр для управления видимостью всех кнопок
  continueButtonText?: string; // Новый параметр для изменения текста кнопки "Продолжить"
  galleryButtonText?: string; // Новый параметр для изменения текста кнопки "В галерею"
  isPrimaryGalleryButton?: boolean; // Новый параметр для управления стилем кнопки "В галерею"
}

const NotificationModal: React.FC<NotificationModalProps> = ({
  isVisible,
  title,
  message,
  isLoading = false,
  promptText,
  onGalleryClick,
  onContinueClick,
  showGalleryButton = true, // По умолчанию кнопка "В галерею" видима
  showButtons = true, // По умолчанию все кнопки видимы
  continueButtonText = 'Продолжить', // По умолчанию текст кнопки "Продолжить"
  galleryButtonText = 'В галерею', // По умолчанию текст кнопки "В галерею"
  isPrimaryGalleryButton = true // По умолчанию кнопка "В галерею" синяя
}) => {
  if (!isVisible) return null;

  return (
    <div className={styles.overlay}>
      <div className={styles.modal}>
        <div className={styles.header}>
          <div className={styles.title}>
            {isLoading && <span className={styles.spinner}></span>}
            {title}
          </div>
          <div className={styles.message}>{message}</div>
        </div>

        {promptText && (
          <div className={styles.promptContainer}>
            <div className={styles.promptLabel}>Использованный промпт:</div>
            <div className={styles.promptText}>{promptText}</div>
          </div>
        )}

        {showButtons && (
          <div className={styles.buttons}>
            {showGalleryButton && (
              <button 
                className={`${styles.button} ${isPrimaryGalleryButton ? styles.primaryButton : styles.secondaryButton}`}
                onClick={onGalleryClick}
              >
                {galleryButtonText}
              </button>
            )}
            <button 
              className={`${styles.button} ${isPrimaryGalleryButton ? styles.secondaryButton : styles.primaryButton}`}
              onClick={onContinueClick}
            >
              {continueButtonText}
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default NotificationModal;
