// components/Stat.js
import { $html } from "../sigpro.js";
import { val, ui } from "../core/utils.js";

/**
 * Stat component
 * 
 * daisyUI classes used:
 * - stat, stat-figure, stat-title, stat-value, stat-desc
 * - text-secondary
 */
export const Stat = (props) => {
  const { class: className, icon, label, value, desc, ...rest } = props;

  return $html("div", { ...rest, class: ui('stat', className) }, [
    icon && $html("div", { class: "stat-figure text-secondary" }, icon),
    label && $html("div", { class: "stat-title" }, label),
    $html("div", { class: "stat-value" }, () => val(value) ?? value),
    desc && $html("div", { class: "stat-desc" }, desc),
  ]);
};