<template>
    <nav class="inline-flex items-center text-sm font-normal font-body">
      <ol class="flex w-auto leading-none group md:flex-wrap">
        <li class="flex items-center sm:hidden text-neutral-500">
          <SfDropdown v-model="dropdownOpened" strategy="absolute" placement="bottom-start" @update:model-value="close">
            <template #trigger>
              <SfButton
                class="relative w-5 h-5 !p-0 rounded-sm outline-secondary-600 hover:bg-transparent active:bg-transparent"
                aria-label="More breadcrumbs"
                type="button"
                variant="tertiary"
                square
                @click="toggle"
              >
                <template #prefix>
                  <SfIconMoreHoriz
                    size="sm"
                    class="text-neutral-500 hover:text-primary-700 active:text-primary-800 active:bg-transparent"
                  />
                </template>
              </SfButton>
            </template>
            <div class="px-4 py-2 rounded-md shadow-md border-neutral-100">
              <li v-for="item in breadcrumbs" :key="item.name" class="py-2 last-of-type:hidden">
                <SfLink
                  :href="item.link"
                  variant="secondary"
                  class="leading-5 no-underline text-inherit hover:underline active:underline whitespace-nowrap outline-secondary-600"
                >
                  {{ item.name }}
                </SfLink>
              </li>
            </div>
          </SfDropdown>
        </li>
        <li
          v-for="(item, index) in breadcrumbs"
          :key="item.name"
          class="peer hidden sm:flex items-center peer-[:nth-of-type(even)]:before:content-['/'] peer-[:nth-of-type(even)]:before:px-2 peer-[:nth-of-type(even)]:before:leading-5 last-of-type:flex last-of-type:before:font-normal last-of-type:before:text-neutral-500 text-neutral-500 last-of-type:text-neutral-900 last-of-type:font-medium"
        >
          <SfLink
            v-if="index === 0"
            :href="item.link"
            variant="secondary"
            class="inline-flex leading-5 no-underline hover:underline active:underline whitespace-nowrap outline-secondary-600 text-neutral-500"
          >
            <SfIconHome size="sm" />
          </SfLink>
          <SfLink
            v-else-if="index < breadcrumbs.length - 1"
            :href="item.link"
            variant="secondary"
            class="leading-5 no-underline hover:underline active:underline whitespace-nowrap outline-secondary-600 text-inherit"
          >
            {{ item.name }}
          </SfLink>
          <span v-else>
            {{ item.name }}
          </span>
        </li>
      </ol>
    </nav>
  </template>
  
  <script lang="ts" setup>
  import { SfDropdown, SfButton, SfLink, SfIconMoreHoriz, SfIconHome } from '@storefront-ui/vue';
  import { ref } from 'vue';
  
  const breadcrumbs = [
    {
      name: 'Home',
      link: '#',
    },
    { name: 'Category', link: '#' },
    { name: 'Shoes', link: '#' },
  ];
  
  const dropdownOpened = ref(false);
  const close = () => {
    dropdownOpened.value = false;
  };
  const toggle = () => {
    dropdownOpened.value = !dropdownOpened.value;
  };
  </script>
  