/**
 * 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 { object, string } from 'prop-types';
import { BONUS_LABELS } from '@mine-utils';

const formatPlayerName = name => {
  if (name && name.startsWith('anon_')) {
    return 'Anonymous';
  }

  if (name && 10 < name.length) {
    return name.substring(0, 7) + '...';
  }

  return name || 'Unknown';
};

export const PlayerColumn = ({ color, player }) => (
  <div className={`bsd-column bsd-column--${color}`}>
    <div className="bsd-column-header">
      <span className="bsd-column-name">{formatPlayerName(player.name)}</span>
      <span className="bsd-column-total">
        <i className="fa fa-star" />
        {player.bonusPoints}
      </span>
    </div>
    <ul className="bsd-stats">
      {Object.entries(BONUS_LABELS).map(([key, { label, desc }]) => (
        <li key={key} className="bsd-stat">
          <div className="bsd-stat-text">
            <span className="bsd-stat-label">{label}</span>
            <span className="bsd-stat-desc">{desc}</span>
          </div>
          <span className="bsd-stat-value">{player.bonusStats?.[key] ?? 0}</span>
        </li>
      ))}
    </ul>
  </div>
);

PlayerColumn.propTypes = {
  color: string.isRequired,
  player: object.isRequired,
};