import "./style.pcss";

import { createElement } from "react";
import type { FC, ReactElement } from "react";
import type { IFormattedValue } from "./config/types";
import { getFormatNumber } from "./lib/index";
import type { IComponentBaseProps } from "../../types/components/index";
import { useCN } from "../../utils/react/useCN";

/**
 * Компонент форматированного числа
 * @returns {ReactElement}
 */
const FormattedValue: FC<IComponentBaseProps & IFormattedValue> = ({
  baseClass = "formattedValue",
  extraClasses = {},
  extraAttrs = {},
  value = 0,
  tag = "div",
  separator = " ",
  prefix = null,
  postfix = null,
  children = null,
}): ReactElement => {

  const { getCN } = useCN(baseClass);

  const formattedNumber = getFormatNumber({ value, separator });

  const content = children || (
    <>
      {!!prefix && <span className={getCN("prefix")}>{prefix}</span>}
      <span className={getCN("value")}>{formattedNumber}</span>
      {!!postfix && <span className={getCN("postfix")}>{postfix}</span>}
    </>
  );

  return createElement(tag, {
    className: getCN("", extraClasses),
    ...extraAttrs,
  }, content);
};

export type { IFormattedValue };
export { FormattedValue };