import React from 'react';
import { useActivity } from '../context/ActivityContext';
import { ActivityUserProps } from '../types';

const ActivityUser = ({
  activityInfo,
  className = 'activity-user',
  style,
  loadingText = '加载中...',
  loadingClassName = 'loading',
  pointsText = '我的积分'
}: ActivityUserProps): React.ReactElement => {
  const { userInfo, loading } = useActivity();

  if (loading) {
    return (
      <div
        className={`${className} ${loadingClassName}`}
        style={style}
      >
        {loadingText}
      </div>
    );
  }

  if (!userInfo) {
    return null;
  }
  console.log('userInfo', userInfo);
  return (
    <div className={className} style={style}>
      <div className="user-info">
        {userInfo.points !== undefined && (
          <div className="user-points">
            <span>
              {pointsText}: {userInfo.points}
            </span>
            <img
              className='points-icon'
              src={userInfo.pointsIcon}
              alt="积分" />
          </div>
        )}
      </div>
    </div>
  );
};

export default ActivityUser;