<template>
  <client-only>
    <el-breadcrumb separator="/" class="breadcrumbs">
      <el-breadcrumb-item
        v-for="(crumb, idx) in breadcrumbs"
        :key="idx"
      >
        <nuxt-link-locale
          v-if="idx !== breadcrumbs.length - 1"
          :to="crumb.link"
          class="breadcrumbs__link"
        >
          {{ crumb.text }}
        </nuxt-link-locale>
        <span v-else class="breadcrumbs__current">
          {{ crumb.text }}
        </span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </client-only>
</template>

<script setup lang="ts">
import {useBreadcrumbs} from '@composables/breadcrumbs';

const { breadcrumbs } = useBreadcrumbs();
</script>

<style scoped lang="scss">
.breadcrumbs {
  background-color: $title_bg;
  padding: 15px 250px 15px 50px;
  line-height: 140%;
  border-bottom: 1px solid $border;

  &__link {
    cursor: pointer !important;
    color: $primary !important;
    font-weight: 600 !important;

    @include hover {
      color: $primary_dark !important;
    }
  }

  &__current {
    font-weight: 600;
    color: $primary_dark;
  }
}
</style>