<template>
  <div class="uic-segmented-progressbar"
    v-bind:style="{
      'border-color': borderColor,
      'border-radius': borderRadius || '2.5px',
      'height': height || '50px',
      'width': width || '100%',
    }"
    v-bind:class="{
      'uic-bordered-segmented-progressbar': showBorder,
    }">
    <span class="uic-progressbar-segment" v-for="(segment, index) in segmentArray"
      v-bind:style="{
        'border-radius': segmentBorderRadius || '2.5px',
        'background-color': segmentColor || '#000',
        'width': segmentWidth,
        'margin-left': index > 0 ? `${segmentMargin / 2}%` : '0%',
        'margin-right': index < segmentArray.length - 1 ? `${segmentMargin / 2}%` : '0%',
      }"
      v-bind:class="{
        'uic-blinking-progressbar-segment': segment.shouldBlink,
        'uic-inactive-progressbar-segment': index >= progressIndex && !segment.shouldBlink,
      }"/>
  </div>
</template>

<script lang="ts" src="./SegmentedProgressBar.ts">
    export { default } from './SegmentedProgressBar.ts';
</script>

<style lang="scss">
  @import "./SegmentedProgressBar.scss"
</style>
