import type { Metric, MetricBlock } from "#types/block.types";
import { appendChildren, createElement } from "#core/factories/element.factory";

const renderMetric = function renderMetric(metric: Metric): Element {
    return createElement("div", {
        children: [
            createElement("span", { className: "record-field-label", text: metric.label }),
            createElement("span", { className: "record-field-value metric-value", text: metric.value }),
        ],
        className: "record-field metric-card",
    });
};

export const renderMetricGrid = function renderMetricGrid(block: MetricBlock): Element {
    const grid = createElement("div", { className: "record-fields metric-grid" });
    appendChildren(grid, block.metrics.map(renderMetric));
    return grid;
};

export const renderMetrics = function renderMetrics(block: MetricBlock): Element {
    return createElement("figure", {
        children: [
            createElement("figcaption", {
                children: [createElement("span", { className: "diagram-caption", text: block.caption })],
                className: "diagram-header",
            }),
            renderMetricGrid(block),
        ],
        className: "diagram-figure metric-figure",
    });
};