/**
 * GnBreadcrumbs - Navigation breadcrumb list.
 */

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

export default defineComponent({
	name: "GnBreadcrumbs",
	props: {
		inverted: { type: Boolean, default: false },
		size: { type: String, default: "" },
		separator: { type: String, default: "/" }
	},
	setup(props, { slots }) {
		const classes = computed(() =>
			cx("breadcrumb", {
				"breadcrumb-inverted": props.inverted,
				"breadcrumb-sm": props.size === "sm",
				"breadcrumb-lg": props.size === "lg"
			})
		);

		return () =>
			h("nav", { "aria-label": "Breadcrumb" }, [
				h("ol", { class: classes.value }, slots.default?.())
			]);
	}
});