<script lang="ts" setup>
import { defineProps } from "vue";
import { BreadcrumbItem } from "./props";
import { GrBreadcrumbListItem, GrBreadcrumbSeparator } from "@/components/breadcrumb";

type BreadcrumbListType = {
  items?: BreadcrumbItem[];
};
defineProps<BreadcrumbListType>();
</script>

<template>
  <ol class="breadcrumb-list" :class="$props.class">
    <slot name="home">
      <gr-breadcrumb-list-item>
        <router-link to="/">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            style="width: 18px; height: 18px; color: var(--primary-500)"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
            />
          </svg>
        </router-link>
      </gr-breadcrumb-list-item>
    </slot>

    <gr-breadcrumb-separator v-if="items?.length" />

    <slot name="items">
      <template v-for="(item, index) of items" :key="index">
        <gr-breadcrumb-list-item :item="item" />
        <gr-breadcrumb-separator v-if="items && index !== items.length - 1" />
      </template>
    </slot>
  </ol>
</template>

<style lang="scss" scoped>
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1-5);
  align-items: center;
  font-size: var(--font-sm);
  line-height: --var(--spacing-5);
  overflow-wrap: break-word;
  list-style-type: none;

  @include size(md) {
    gap: var(--spacing-2-5);
  }
}
</style>
