<template>
  <div :class="[
    `${$classPrefix}-timeline-item`
  ]">
    <div :class="[
      `${$classPrefix}-timeline-block`
    ]">
      <div :class="[
        `${$classPrefix}-timeline__chain`
      ]">
        <div :class="[
          `${$classPrefix}-timeline__dot`
        ]">
          <irbis-icon
            v-if="icon"
            :name="icon"
            :class="[
            `${$classPrefix}-timeline__icon`
          ]"
          />
          <div v-else :class="[
            `${$classPrefix}-timeline__circle`
          ]">
            <div></div>
          </div>
        </div>
        <div :class="[
          `${$classPrefix}-timeline__line`
        ]"></div>
      </div>
      <span>
        <slot />
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "IrbisTimelineItem",

  props: {
    icon: String
  }
};
</script>