/**
 * card.js — Hero card primitive.
 * Renders a single stat tile with animated counter + sparkline canvas.
 */

import { drawSparkline } from './sparkline.js';

/**
 * Build the inner HTML for a hero stat card.
 * @param {{ id: string, label: string, canvasId: string, color: string }} opts
 * @returns {string} HTML string
 */
export function heroCardHtml({ id, label, canvasId, color }) {
    return `<div class="hero-stat">
        <div class="stat-label">${label}</div>
        <div class="stat-value" id="${id}">—</div>
        <canvas class="sparkline" id="${canvasId}" width="80" height="24" aria-hidden="true"></canvas>
    </div>`;
}

/**
 * Update all four hero KPI cards with new data.
 * @param {{ tokens: number[], pct: number[], memories: number[], ops: number[] }} spark - ring buffers
 */
export function updateHeroCards(spark) {
    if (!spark) return;
    drawSparkline('spark-tokens',   spark.tokens,   'oklch(87% 0.19 152)');
    drawSparkline('spark-pct',      spark.pct,      'oklch(83% 0.14 220)');
    drawSparkline('spark-memories', spark.memories, 'oklch(68% 0.22 295)');
    drawSparkline('spark-ops',      spark.ops,      'oklch(83% 0.17 55)');
}
