<script setup lang="ts">
import { useGitContext } from '../../composables/useGitContext'
import pencilIcon from '../../assets/pencil.svg'
import plusIcon from '../../assets/plus.svg'
import minusIcon from '../../assets/minus.svg'


// ---------------------------------------------------------------------------
// Context
// ---------------------------------------------------------------------------

const { indexStatus } = useGitContext()
</script>

<template>
  <div
    v-if="indexStatus"
    class="indexStatus"
  >
    <div
      v-if="indexStatus.modified > 0"
      class="status"
    >
      <span :class="['value', 'modified']">
        {{ indexStatus.modified }}
      </span>

      <div class="iconWrapper">
        <img :src="pencilIcon" class="pencil" alt="modified">
      </div>
    </div>

    <div
      v-if="indexStatus.added > 0"
      class="status"
    >
      <span :class="['value', 'added']">
        {{ indexStatus.added }}
      </span>

      <div class="iconWrapper">
        <img :src="plusIcon" class="plus" alt="added">
      </div>
    </div>

    <div
      v-if="indexStatus.deleted > 0"
      class="status"
    >
      <span :class="['value', 'deleted']">
        {{ indexStatus.deleted }}
      </span>

      <div class="iconWrapper">
        <img :src="minusIcon" class="minus" alt="deleted">
      </div>
    </div>
  </div>
</template>

<style scoped>
.pencil, .plus, .minus {
  height: .75rem;
  width: .75rem;
}

.indexStatus {
  display: flex;
  align-items: center;
  margin-left: .75rem;
  gap: .5rem;
  opacity: 0.8;
  transition: opacity ease-in-out 0.2s;

  &:hover {
    opacity: 1;
  }

  .status {
    display: flex;
    align-items: center;
      gap: .125rem;
  }
}

.modified {
  color: #e5a935;
}

.deleted {
  color: #FF757C;
}

.added {
  color: #5dc044;
}
</style>
