import React from 'react';
import PropTypes from 'prop-types';
import styles from './game-loading-overlay.css';

const GameLoadingOverlay = ({ visible, progress }) => {
  const pct = Math.max(0, Math.min(100, Math.round(Number(progress) || 0)));

  return (
    <div
      className={`${styles.overlay}${visible ? '' : ` ${styles.hidden}`}`}
      aria-hidden={!visible}
    >
      <div className={styles.text}>正在加载中</div>
      <div className={styles.barTrack}>
        <div className={styles.barFill} style={{ width: `${pct}%` }} />
      </div>
      <div className={styles.percent}>{pct}%</div>
    </div>
  );
};

GameLoadingOverlay.propTypes = {
  visible: PropTypes.bool,
  progress: PropTypes.number
};

GameLoadingOverlay.defaultProps = {
  visible: true,
  progress: 0
};

export default GameLoadingOverlay;