import React from 'react';
import { useSelector } from 'react-redux';
import { Modal } from 'antd';
import { selectIsMobile } from '@store/slices/deviceSlice';
import DynamicNewsDetailPanel from './DynamicNewsDetail/DynamicNewsDetailPanel';
import './EventDetailModal.less';

interface EventDetailModalProps {
  /** 是否打开弹窗 */
  open: boolean;
  /** 关闭弹窗回调 */
  onClose: () => void;
  /** 事件对象 */
  event: any; // TODO: 后续可替换为具体的 Event 类型
}

/**
 * 事件详情弹窗组件
 */
const EventDetailModal: React.FC<EventDetailModalProps> = ({
  open,
  onClose,
  event,
}) => {
  const isMobile = useSelector(selectIsMobile);

  return (
    <Modal
      open={open}
      onCancel={onClose}
      footer={null}
      title={event?.title || '事件详情'}
      width='100vw'
      destroyOnClose
      className="event-detail-modal"
      styles={{
        mask: { background: 'transparent' },
        content: { borderRadius: 24, padding: 0, maxWidth: 1400, background: 'transparent', margin: '0 auto' },
        header: { background: '#FFFFFF', borderBottom: '1px solid #E2E8F0', padding: '16px 24px', borderRadius: '24px 24px 0 0' },
        body: { padding: 0 },
      }}
    >
      {event && <DynamicNewsDetailPanel event={event} showHeader={false} />}
    </Modal>
  );
};

export default EventDetailModal;