/**
 * 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 React from 'react';
import { func, number, string } from 'prop-types';

const BonusBox = ({ color, points, onClick, title }) => (
  <button
    type="button"
    className={`bonus-box ${color}-bonus`}
    onClick={onClick}
    title={title || 'View bonus statistics'}
    aria-label={`${color} bonus points: ${points}`}
  >
    <i className="fa fa-star bonus-box__icon" />
    <span className="bonus-box__value">{points}</span>
  </button>
);

export default BonusBox;

BonusBox.propTypes = {
  color:   string.isRequired,
  points:  number.isRequired,
  onClick: func.isRequired,
  title:   string,
};