<script lang="ts" setup>
import { twJoin } from 'tailwind-merge'

const props = withDefaults(
  defineProps<{
    label?: string
    icon?: string
    orientation?: 'vertical' | 'horizontal'
    type?: 'solid' | 'dashed' | 'dotted'
  }>(),
  {
    orientation: 'horizontal',
  },
)
const wrapperClass = computed(() =>
  twJoin(
    'flex items-center align-center text-center w-full',
    props.orientation === 'horizontal' ? 'flex-row' : 'flex-col',
  ),
)
const containerClass = computed(() => {
  return twJoin(
    'font-medium flex',
    props.orientation === 'horizontal' ? 'mx-3 whitespace-nowrap' : 'my-2',
  )
})
const borderClass = computed(() => {
  return twJoin(
    'flex border-border',
    props.orientation === 'horizontal' ? 'w-full border-t' : 'h-full border-s',
    props.type === 'dashed' && 'border-dashed',
    props.type === 'dotted' && 'border-dotted',
    props.type === 'solid' && 'border-solid',
  )
})
</script>

<template>
  <div :class="wrapperClass">
    <div :class="borderClass" />

    <template v-if="label || icon || $slots.default">
      <div :class="containerClass">
        <slot>
          <span v-if="label" class="text-sm">
            {{ label }}
          </span>
          <span v-else-if="icon" :class="icon" class="flex-shrink-0 w-5 h-5" />
        </slot>
      </div>

      <div :class="borderClass" />
    </template>
  </div>
</template>
