<script lang="ts" setup>
defineOptions({ name: 'BglDivider' })
import { useSlots } from 'vue'

/**
 * Hairline separator in the theme border color.
 * - Horizontal by default; `vertical` for inline groups (toolbars, breadcrumbs).
 * - Default slot (or `label`) renders centered text with a line on each side
 *   (horizontal only) — e.g. an "OR" divider.
 * - `size` sets the length of a vertical divider (maps to --divider-size).
 */
const {
	vertical = false,
	label = '',
	size,
	class: className = '',
} = defineProps<{
	vertical?: boolean
	label?: string
	size?: string
	class?: string
}>()

const slots = useSlots()
</script>

<template>
	<!-- vertical: short hairline, no label support -->
	<div
		v-if="vertical"
		class="divider-v"
		:class="className"
		:style="size ? { '--divider-size': size } : undefined"
		role="separator"
		aria-orientation="vertical"
	/>

	<!-- horizontal with label/slot: line — content — line -->
	<div v-else-if="label || slots.default" class="bgl-divider-labeled flex gap-075" :class="className" role="separator">
		<span class="divider bgl-divider-line" />
		<span class="bgl-divider-label flex-shrink-0 white-space-nowrap"><slot>{{ label }}</slot></span>
		<span class="divider bgl-divider-line" />
	</div>

	<!-- plain horizontal hairline -->
	<div v-else class="divider" :class="className" role="separator" />
</template>

<style scoped>
.bgl-divider-line {
	flex: 1;
}
.bgl-divider-label {
	font-size: 0.8125rem;
	color: var(--bgl-text-soft, var(--bgl-gray));
}
</style>
