<script setup>

import Icon from './Icon.vue';

const emit = defineEmits([ 'click' ]);
const props = defineProps({
  items: {
    type: Array
  },
  home: {
    type: Object,
    default: {
      label: 'Home',
      icon: 'fa-solid fa-house',
      route: null,
      action(item, event) {}
    }
  }
});

function onClick() {
  emit('click');
}

</script>

<template>
  <div class="pankow-breadcrumb">
    <a class="pankow-breadcrumb-item" :href="home.route" @click="home.action ? home.action(home, $event) : null" @keydown.enter="home.action ? home.action(home, $event) : null" tabindex="0">
      <Icon :class="home.icon"/> {{ home.label }}
    </a>
    <span v-for="item in items">
      <Icon icon="fa-solid fa-chevron-right" class="pankow-breadcrumb-separator"/>
      <a class="pankow-breadcrumb-item" :href="item.route" @click="item.action ? item.action(home, $event) : null" @keydown.enter="item.action ? item.action(home, $event) : null" tabindex="0">
        <Icon v-if="item.icon" :class="item.icon"/> {{ item.label }}
      </a>
    </span>
  </div>
</template>

<style>

.pankow-breadcrumb {
  display: block;
  overflow: auto;
  white-space: nowrap;
}

.pankow-breadcrumb-separator {
  margin: 0 8px;
}

.pankow-breadcrumb-item {
  display: inline-block;
  margin: 4px;
  user-select: none;
}

.pankow-breadcrumb-item:hover {
  color: var(--pankow-color-primary);
  cursor: pointer;
}

.pankow-breadcrumb a {
  color: var(--pankow-color-dark);
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  .pankow-breadcrumb a {
    color: var(--pankow-color-light-dark);
  }
}

.pankow-breadcrumb a:hover {
  color: var(--pankow-color-primary-hover);
}

</style>