// components/Stats.js
import { Tag } from "sigpro";

export const Stats = (props, children) => {
  const { class: className, vertical = false, ...rest } = props;
  const direction = vertical ? "stats-vertical" : "stats-horizontal";
  return Tag("div", {
    ...rest,
    class: `stats ${direction} ${className || ''}`.trim()
  }, children);
};

export const Stat = (props) => {
  const { class: className, label, value, desc, icon, actions, children, ...rest } = props;

  if (children !== undefined) {
    return Tag("div", { ...rest, class: `stat ${className || ''}`.trim() }, children);
  }

  return Tag("div", { ...rest, class: `stat ${className || ''}`.trim() }, [
    icon && Tag("div", { class: "stat-figure" }, icon),
    label && Tag("div", { class: "stat-title" }, label),
    value && Tag("div", { class: "stat-value" }, value),
    desc && Tag("div", { class: "stat-desc" }, desc),
    actions && Tag("div", { class: "stat-actions" }, actions)
  ]);
};