<template>
  <div class="breadcrumbs">
    <div class="flex">
      <div
        class="flex items-center"
        v-for="(item, index) in list"
        :key="index"
        :class="{ 'text-regular': index == list.length - 1 }"
      >
        <base-icon
          v-if="index == 0"
          height="20"
          width="20"
          :iconName="item.icon ? item.icon : 'home'"
          color="#6F7C89"
          class="breadcrumbs-label"
          @click="handleClick(item)"
        />
        <base-icon
          v-if="index != 0"
          iconName="chevron_right"
          color="#D4D7DB"
          class="mx-1"
        />
        <typo-text
          v-if="index != 0"
          :variant="index == list.length - 1 ? 'body-2-regular' : 'body-2-bold'"
          class="breadcrumbs-label"
          @click="handleClick(item)"
        >
          {{ item.label }}
        </typo-text>
      </div>
    </div>
  </div>
</template>

<script>
import BaseIcon from "@/components/Base/BaseIcon";
import TypoText from "@/components/Typography/TypoText";

export default {
  components: {
    BaseIcon,
    TypoText,
  },
  props: {
    list: {
      type: [Array],
    },
  },
  methods: {
    handleClick(val) {
      this.$emit("clickBreadcrumbs", val);
    },
  },
};
</script>

<style lang="scss">
@use "@/assets/style/_color.scss" as *;

.breadcrumbs {
  display: flex;
  align-items: center;
  color: $neutral-4;

  &-label {
    cursor: pointer;
  }

  .body-2-regular {
    cursor: default;
    pointer-events: none;
  }

  .body-2-bold:hover {
    color: $dark-blue-4;
  }
}
</style>
