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;
}

const NotificationModal: React.FC<NotificationModalProps> = ({
  isVisible,
  title,
  message,
  isLoading = false,
  promptText,
  onGalleryClick,
  onContinueClick
}) => {
  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>
        )}

        <div className={styles.buttons}>
          <button 
            className={`${styles.button} ${styles.primaryButton}`}
            onClick={onGalleryClick}
          >
            В галерею
          </button>
          <button 
            className={`${styles.button} ${styles.secondaryButton}`}
            onClick={onContinueClick}
          >
            Продолжить
          </button>
        </div>
      </div>
    </div>
  );
};

export default NotificationModal;
