<template>
  <div class="breadcrumb">
    <RouterLink :to="homeLocation">
      <AnimatedHomeIcon />
    </RouterLink>

    <template v-for="breadcrumb in breadcrumbs" :key="breadcrumb.label">
      <span> {{ separator }} </span>

      <RouterLink v-if="breadcrumb.to" :to="breadcrumb.to">
        {{ breadcrumb.label }}
      </RouterLink>

      <span class="breadcrumb__here" v-else>
        {{ breadcrumb.label }}
      </span>
    </template>
  </div>
</template>

<script setup lang="ts">
import { type Breadcrumb } from '../../models/breadcrumb.model';
import type { RouteLocationRaw } from 'vue-router';
import AnimatedHomeIcon from '@/assets/animated-icons/AnimatedHomeIcon.vue';

withDefaults(
  defineProps<{
    homeLocation?: RouteLocationRaw | string;
    breadcrumbs: Breadcrumb[];
    separator?: string;
  }>(),
  { homeLocation: '/', separator: '>' },
);
</script>

<style scoped lang="scss">
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5em;
  &__here {
    font-weight: bold;
  }
}
</style>
