<script lang="ts">
    import { getLocaleUrl, t } from '$lib/translations';

  export let className = '';
  export let title = '';
  export let tree: any[] = [];
</script>

<nav class="breadcrumbs {className}" aria-label="Breadcrumb">
  <a href="{getLocaleUrl('/')}">{$t('Home')}</a><span class="sep" aria-hidden="true">/</span>
  {#each tree as item}
    <a href="{getLocaleUrl(item.path)}">{$t(item.name)}</a><span class="sep" aria-hidden="true">/</span>
  {/each}
  <span>{title}</span>
</nav>

<style lang="scss">
  @import 'src/scss/media';
  @import 'src/scss/mixins';
  @import 'src/scss/variables';

  .breadcrumbs {
    padding-top: 24px;
    padding-bottom: 0;
    font-size: 0.8125rem; color: #889aa8;
    display: flex; align-items: center; gap: 6px;

    span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .breadcrumbs a { color: #889aa8; transition: color 0.2s; }
  .breadcrumbs a:hover { color: #E62334; }
  .breadcrumbs .sep { color: #c5cfd6; }
</style>