<template>
  <icon
    v-if="progressState === 'full'"
    :class="[
      { 'is-active' : isActive, },
      progressState,
    ]"
    name="check-circle"
  />
  <span
    v-else
    :class="[
      { 'is-active': isActive, },
      progressState,
      'progress-icon',
    ]"
  />
</template>

<script>
/**
 * The Progress icon based on progressState prop.
 *
 * @vuedoc
 * @exports ProjectProductSelector/TfProgressIcon
 * @category Components
 */
  export default {
    name: 'TfProgressIcon',
    props: {
      isActive: {
        type: Boolean,
        default: false,
      },
      progressState: {
        type: String,
        default: null,
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import 'src/assets/styles/variables';

  svg {
    width: 16px;
    height: 16px;

    &.full {
      fill: $tf-green;
    }

    &.active {
      fill: $tf-blue;
    }

    &.is-active {
      fill: $tf-white;
    }
  }

  .progress-icon {
    display: block;
    width: 16px;
    height: 16px;
    overflow: hidden;
    border: 2px solid $tf-light-gray;
    border-radius: 100%;
    box-sizing: border-box;

    &.is-active {
      border-color: $tf-white;
    }

    &.half {
      &:after {
        display: block;
        margin-left: 6px;
        background: $tf-orange;
        width: 14px;
        height: 14px;
        content: '';
      }

      &.is-active:after {
        background-color: $tf-white;
      }
    }
  }
</style>
