// components/Indicator.js
import { Tag } from "../sigpro.js";
import { ui } from "../core/utils.js";

/**
 * Indicator component
 * 
 * daisyUI classes used:
 * - indicator, indicator-item
 * - badge, badge-primary, badge-secondary, badge-accent
 * - badge-info, badge-success, badge-warning, badge-error
 * - badge-outline, badge-soft, badge-dash
 * - badge-xs, badge-sm, badge-md, badge-lg
 */
export const Indicator = (props, children) => {
  const { value, class: className, ...rest } = props;
  
  return Tag("div", {
    ...rest,
    class: "indicator"
  }, () => [
    // El indicador debe ir PRIMERO (antes que el children)
    value ? Tag("span", { 
      class: ui('indicator-item badge', className) 
    }, () => typeof value === "function" ? value() : value) : null,
    children
  ].filter(Boolean));
};