import { ReactNode } from "react";

import "./MiniStats.css";
import { getCN, isMasive } from "../utils";

function MiniStats({
  children,
  background = true,
  ...props
}: {
  [x: string]: any;
}) {
  return (
    <div className={getCN(`MiniStats`, props.className)}>
      {isMasive(children) ? (
        children.map((a: any, index: any) => (
          <div
            style={{
              width: `calc(100% / ${children.length})`,
            }}
            key={index}
            className={getCN([
              `MYUI-MiniStats--content`,
              background && `MYUI-Background__secondary`,
            ])}
          >
            {a}
          </div>
        ))
      ) : (
        <div
          style={{
            width: `100%`,
          }}
          className={getCN([
            `MYUI-MiniStats--children`,
            background && `MYUI-Background__secondary`,
          ])}
        >
          {children}
        </div>
      )}
    </div>
  );
}

export default MiniStats;