import type { ReactNode } from 'react';
import React from 'react';

type ReactElementProps = Record<PropertyKey, unknown>;

export function isNativeHtmlStructure(node: ReactNode): boolean {
  if (
    node === true ||
    node === false ||
    node === null ||
    node === undefined ||
    typeof node === 'string' ||
    typeof node === 'number'
  ) {
    return true;
  } else if (Array.isArray(node)) {
    return node.every(element => isNativeHtmlStructure(element));
  } else if (typeof node === 'object') {
    if (React.isValidElement<ReactElementProps>(node)) {
      // node.type for native HTML elements are strings
      if (typeof node.type === 'string') {
        return isNativeHtmlStructure(node.props.children as ReactNode);
      } else if (typeof node.type === 'symbol') {
        // node.type for fragments is a symbol
        if (node.type === Symbol.for('react.fragment')) {
          return isNativeHtmlStructure(node.props.children as ReactNode);
        } else {
          // we can ignore other types of components
          return false;
        }
      } else {
        return false;
      }
    } else {
      return false;
    }
  } else {
    return false;
  }
}