import { createElement, type ComponentType, type ReactNode } from 'react'
import { isValidElementType } from 'react-is'

type AddonComponent = ComponentType<{
  __addonCompatible?: undefined
  src: undefined
  alt: undefined
}>

export type AddonValue = ReactNode | AddonComponent

export function renderAddon(value: AddonValue): ReactNode {
  return isValidElementType(value) && typeof value !== 'string'
    ? createElement(value)
    : (value as ReactNode)
}

/**
 * There is no single `Addon` component. Components that accept addons render their own `gds-addon`
 * container (either inline or via a local wrapper component) that wraps the result of
 * `renderAddon(value)`.
 */
