/* ============================================================
   Primitives — Points Chip
   Extracted from components.jsx via split.py.
   Each component reaches React hooks via window.React.
   ============================================================ */
const { useState, useEffect, useRef, useMemo, useCallback, Fragment } = React;


/* ============================================================
   PHASE 2 — Attributes and Skills
   ============================================================ */

/* Points-remaining chip: shows N/M with a color that shifts to warn/bad as you
   approach zero or go over. Used in the Attributes and Skills card headers. */
window.PointsChip = function PointsChip({ label, spent, total }) {
    const remaining = total - spent;
    let variant = '';
    if (total > 0) {
        if (remaining === 0) variant = 'good';
        else if (remaining < 0) variant = 'bad';
        else if (remaining <= 2) variant = 'warn';
    }
    return (
        <div className={`points-chip ${variant}`}>
            <span>{label}:</span>
            <span className="pts-value">{spent} / {total}</span>
        </div>
    );
};