/**
 * GnBreadcrumbItem - Single breadcrumb segment.
 */

import { defineComponent, h, computed } from "vue";
import { cx } from "../utils.js";

export default defineComponent({
	name: "GnBreadcrumbItem",
	props: {
		href: { type: String, default: "" },
		active: { type: Boolean, default: false },
		separator: { type: String, default: "/" }
	},
	setup(props, { slots }) {
		const classes = computed(() => cx("breadcrumb-item", { "is-active": props.active }));

		return () => {
			const children = [];
			const content = props.href
				? h("a", { href: props.href }, slots.default?.())
				: h("span", null, slots.default?.());
			children.push(content);
			if (!props.active) {
				children.push(
					h("span", { class: "breadcrumb-separator", "aria-hidden": "true" }, props.separator)
				);
			}
			return h("li", { class: classes.value }, children);
		};
	}
});