import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
import { computed } from "vue";
import { genericComponent } from "../../utils";
import { Button } from "../../components/button";
import { Icon } from "../../components/icon";
import { makeButtonProps } from "../../components/button/button";
import { makeGroupItemProps, useGroupItem } from "../../composables/group";
import { BreadcrumbKey } from "./breadcrumb";
const BreadcrumbItem = genericComponent()({
  name: "VeBreadcrumbItem",
  props: {
    ...makeButtonProps({
      variant: "text"
    }),
    ...makeGroupItemProps()
  },
  setup(props, {
    slots
  }) {
    const {
      id,
      group
    } = useGroupItem(props, BreadcrumbKey);
    const hasNext = computed(() => {
      if (!group.items.value.length)
        return false;
      return group.items.value[group.items.value.length - 1].id !== id;
    });
    return () => {
      return _createVNode(_Fragment, null, [_createVNode("li", {
        "class": ["ve-breadcrumb-item", {
          "ve-breadcrumb-item--has-next": hasNext.value
        }]
      }, [_createVNode(Button, props, slots)]), hasNext.value && _createVNode("li", {
        "class": "ve-breadcrumb-separator",
        "aria-hidden": "true"
      }, [slots.separator?.() ?? group.vm?.slots.separator?.() ?? _createVNode(Icon, {
        "icon": "$separator"
      }, null)])]);
    };
  }
});
export {
  BreadcrumbItem
};
//# sourceMappingURL=breadcrumb-item.mjs.map
