/**
 * This file is part of the SplendidBear Websites' projects.
 *
 * Copyright (c) 2026 @ www.splendidbear.org
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */
import { Fragment, useEffect, useState } from 'react';
import { func, number } from 'prop-types';

const ChallengeCountdown = ({ onAccept, onDecline, seconds = 30 }) => {
  const [countdown, setCountdown] = useState(seconds);

  useEffect(() => {
    const interval = setInterval(() => {
      setCountdown(prev => {
        if (1 >= prev) {
          clearInterval(interval);
          onDecline();
          return 0;
        }
        return prev - 1;
      });
    }, 1000);
    return () => clearInterval(interval);
  }, [onDecline]);

  return (
    <Fragment>
      <p style={{ textAlign: 'center', marginBottom: 20, color: '#95cff5' }}>
        You have {countdown} second{1 === countdown ? '' : 's'} to answer to the challenge!
      </p>
      <div className="resign">
        <a onClick={onAccept}>Accept</a>
        <a onClick={onDecline}>Decline</a>
      </div>
    </Fragment>
  );
};

export default ChallengeCountdown;

ChallengeCountdown.propTypes = {
  onAccept:  func.isRequired,
  onDecline: func.isRequired,
  seconds:   number,
};