import { createElement } from 'react';

import type { WithSpacingProps } from '~/src/lib/hocs/withSpacing';
import type { HTMLAttributes, RefObject } from 'react';

import withSpacing from '~/src/lib/hocs/withSpacing';
import { stripNonDomProps } from '~/src/lib/utils/stripNonDomProps';

export interface BoxProps
  extends WithSpacingProps,
    Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'data-testid' | 'onChange'> {
  tag?: string;
  nodeRef?: RefObject<any>;
  testId?: string;
}

const Box = withSpacing<BoxProps>(
  ({ tag = 'div', nodeRef, testId, ...props }) =>
    createElement(tag, {
      // this is first to ensure that if `data-testid` prop is passed it'll still work
      'data-testid': testId,

      ...stripNonDomProps(props),

      // last to ensure `ref` can't be overridden
      ref: nodeRef,
    })
);

export default Box;