<script lang="ts" setup>
import { defineProps } from "vue";
import { BreadcrumbItem } from "./props";

defineProps<{
  item?: BreadcrumbItem
}>();
</script>

<template>
  <li class="breadcrumb-list-item" :class="$props.class">
    <slot>
      <router-link v-if="item?.link" :to="item.link">{{ item.text }}</router-link>
      <gr-label v-else as="span" color="gray-150">{{ item?.text }}</gr-label>
    </slot>
  </li>
</template>

<style lang="scss" scoped>
.breadcrumb-list-item {
  display: inline-flex;
  gap: var(--spacing-1-5);
  align-items: center;

  & > a {
    color: var(--gray-150);
    text-decoration: none;

    &:hover {
      color: var(--gray-300);
    }
  }
}
</style>
