/**
 * 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';

export default function Avatar({ name, color, avatarUrl, bonusPoints = 0 }) {
  const isRed = 'red' === color;
  const initials = (name || '?').slice(0, 2).toUpperCase();

  const gradient = isRed
    ? 'linear-gradient(135deg, rgba(173,10,5,0.6) 0%, rgba(246,125,82,0.4) 100%)'
    : 'linear-gradient(135deg, rgba(35,111,135,0.6) 0%, rgba(41,128,185,0.4) 100%)';
  const glow = isRed
    ? '0 0 0 3px rgba(173,10,5,0.2), 0 0 28px rgba(173,10,5,0.35)'
    : '0 0 0 3px rgba(35,111,135,0.2), 0 0 28px rgba(35,111,135,0.35)';
  const border = isRed
    ? 'rgba(173,10,5,0.5)'
    : 'rgba(35,111,135,0.5)';
  const textColor = isRed ? '#f67d52' : '#95cff5';

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, position: 'relative' }}>
      <div style={{ position: 'relative' }}>
        <div style={{
          width: 72, height: 72, borderRadius: '50%',
          background: avatarUrl ? 'transparent' : gradient,
          border: `2px solid ${border}`,
          boxShadow: glow,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          font: '800 24px \'Rajdhani\', sans-serif',
          color: textColor,
          letterSpacing: 2,
          overflow: 'hidden',
        }}
        >
          {avatarUrl ? (
            <img
              src={avatarUrl}
              alt={name}
              style={{
                width: '100%',
                height: '100%',
                objectFit: 'cover',
              }}
            />
          ) : (
            initials
          )}
        </div>
        {0 < bonusPoints && (
          <div style={{
            position: 'absolute',
            bottom: -6,
            right: -6,
            background: '#ffd700',
            borderRadius: '50%',
            width: 28,
            height: 28,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 0 12px rgba(255, 215, 0, 0.6), 0 0 0 2px rgba(7, 9, 13, 1)',
            border: '2px solid rgba(0,0,0,0.5)',
            zIndex: 10,
          }}
          >
            <i className="fa fa-star" style={{ color: '#000', fontSize: 14 }} />
          </div>
        )}
      </div>
      <span style={{
        font: '700 15px \'Rajdhani\', sans-serif',
        color: textColor,
        letterSpacing: 1,
        maxWidth: 120, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
        textAlign: 'center',
      }}
      >
        {name}
      </span>
      <span style={{
        font: '600 10px \'Rajdhani\', sans-serif',
        textTransform: 'uppercase',
        letterSpacing: 2,
        color: 'rgba(255,255,255,0.3)',
      }}
      >
        {isRed ? 'Red' : 'Blue'}
      </span>
    </div>
  );
}