---
import { ELEMENT_NODE, TEXT_NODE } from 'ultrahtml'
import type { NodeType } from 'ultrahtml'
import Children from './children.astro'

interface Props {
  html?: string,
  debug?: number,
  xpath?: string,
  replacements?: Replacements,

  slotHandler
  parent?: NodeType,
  node: NodeType,
  index?: number,
}


const { props: { parent = null, node, index = 0, debug = 0, replacers, slotHandler } } = Astro
const { name: Name, attributes } = node

if (debug) {
  console.log('node.astro:debug', {node})
}
const nextDebug = debug ? debug - 1 : 0
---
{
  node.type === TEXT_NODE ? <Fragment set:html={node.value}/>
  : node.type === ELEMENT_NODE ? (
    node.isSelfClosingTag ? <Name {...attributes}/>
    : <Name {...attributes}>
        <Children parent={node} children={node.children} debug={nextDebug} replacers={replacers} slotHandler={slotHandler}/>
      </Name>
  ) : (
    <Children parent={node} children={node.children} debug={nextDebug} replacers={replacers} slotHandler={slotHandler}/>
  )
}