import React from 'react';
import { QrCode, X } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import './QRCodeModal.css';

/**
 * QRCodeModal - 二维码分享模态框组件
 *
 * @param {Object} props
 * @param {boolean} props.isOpen - 是否显示模态框
 * @param {Function} props.onClose - 关闭模态框的回调函数
 * @param {string} props.url - 二维码指向的URL
 * @param {string} props.title - 显示的标题文本
 * @param {string} props.description - 描述文本（可选）
 * @param {number} props.size - 二维码尺寸（可选，默认256）
 */
const QRCodeModal = ({
  isOpen,
  onClose,
  url,
  title,
  description = '扫描二维码访问',
  size = 256
}) => {
  if (!isOpen) return null;

  return (
    <div className="qr-modal-overlay" onClick={onClose}>
      <div className="qr-modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h3>
            <QrCode size={20} /> 分享会议
          </h3>
          <button
            className="close-btn"
            onClick={onClose}
            aria-label="关闭"
          >
            <X size={20} />
          </button>
        </div>

        <div className="qr-modal-content">
          <div className="qr-code-container">
            <QRCodeSVG
              value={url}
              size={size}
              level="H"
              includeMargin={true}
            />
          </div>
          <div className="qr-info">
            <p className="qr-description">{description}</p>
            <p className="qr-meeting-title">{title}</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default QRCodeModal;