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

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

export const Stat = (props, children) => {
  children === undefined && (children = props, props = {});
  return Tag("div", { ...props, class: `stat ${props.class ?? ''}` }, [
    props.icon && Tag("div", { class: "stat-figure" }, props.icon),
    props.label && Tag("div", { class: "stat-title" }, props.label),
    props.value && Tag("div", { class: "stat-value" }, props.value),
    props.desc && Tag("div", { class: "stat-desc" }, props.desc),
    props.actions && Tag("div", { class: "stat-actions" }, props.actions),
    children
  ]);
};