<script setup lang="ts">
import { h, useSlots, Component, Comment, Fragment } from 'vue'

const props = defineProps<{
  class?: string
  ux?: any
  orientation: 'horizontal' | 'vertical'
  separator?: Component
  separatorProps?: any
}>()

const classes = useStyling(
  'separatorList',
  {
    slots: {
      base: 'flex items-center',
    },
    variants: {
      orientation: {
        horizontal: {
          base: 'flex-row',
        },
        vertical: {
          base: 'flex-col',
        },
      },
    },
  },
  props
)

const slots = useSlots()

function renderChildren() {
  const children = slots.default ? slots.default() : []

  // if (!props.separator) {
  //   return children
  // }

  const filtered = children.flatMap((child) => {
    if (child.type === Comment) {
      return []
    }
    if (child.type === Fragment) {
      return child.children || []
    }
    return [child]
  })

  const separatedChildren = []

  for (let i = 0; i < filtered.length; i++) {
    separatedChildren.push(filtered[i])

    if (i < filtered.length - 1) {
      separatedChildren.push(h(props.separator, props.separatorProps))
    }
  }

  return separatedChildren
}
</script>

<template>
  <div :class="classes.base">
    <renderChildren />
  </div>
</template>
