import React, { useMemo } from 'react';
import { clsx } from 'clsx';

import { buildClassNameObject } from '../utils/misc';
import { forwardRef } from '../utils/react';
import { Box } from '../box';
import * as css from './stat.css';

/*-- Types --*/

export interface StatGroupProps {
  className?:
    | string
    | {
        container?: string;
        group?: string;
      };
}

/*-- Main --*/

export const StatGroup = forwardRef<'div', StatGroupProps>(function StatGroup(
  { className, children, ...rest },
  ref,
) {
  const cn = useMemo(() => {
    const classNameObject = buildClassNameObject(className, 'container');

    return {
      container: clsx(classNameObject.container, css.statsContainer),
      group: clsx(classNameObject.group, css.stats),
    };
  }, [className]);

  return (
    <Box ref={ref} className={cn.container} {...rest}>
      <div className={cn.group}>{children}</div>
    </Box>
  );
});