import React, { useState } from 'react';
import {
  ActivityContainer,
  ActivityUser,
  MissionListView,
  MissionPopupView,
  Mission
} from '../index';

const ConfessionExample: React.FC = () => {
  const [showPopup, setShowPopup] = useState(false);

  const handleMissionProgress = (mission: Mission) => {
    console.log('任务进度更新:', mission);
    // 这里可以添加自定义的任务完成逻辑
  };

  return (
    <ActivityContainer activityCode="confession">
      <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
        <h1>告白活动示例</h1>

        {/* 用户信息组件 */}
        <ActivityUser />

        {/* 任务列表组件 */}
        <MissionListView
          onMissionProgressUpdate={handleMissionProgress}
        />

        {/* 显示弹窗的按钮 */}
        <div style={{ marginTop: '20px', textAlign: 'center' }}>
          <button
            onClick={() => setShowPopup(true)}
            style={{
              padding: '12px 24px',
              backgroundColor: '#1976d2',
              color: 'white',
              border: 'none',
              borderRadius: '6px',
              cursor: 'pointer',
              fontSize: '16px'
            }}
          >
            打开任务弹窗
          </button>
        </div>

        {/* 任务弹窗组件 */}
        <MissionPopupView
          visible={showPopup}
          onClose={() => setShowPopup(false)}
          onMissionProgressUpdate={handleMissionProgress}
        />
      </div>
    </ActivityContainer>
  );
};

export default ConfessionExample;