<script lang="ts">
    import { browser } from '$app/environment';
    import { shortenResult } from "$utils/output";

  export let value: number;
  export let max: number;
  export let title: string;
  export let className: string = '';

  let isMobile: boolean;
  let itemsCount: number = 20;
  $: active = Math.ceil(value / max * 21);
  $: items = Array.from({ length: itemsCount }, (_, i) => i);

  if (browser) {
      isMobile = window.innerWidth < 769;
      if (isMobile) {
          itemsCount = 11;
      } else {
          itemsCount = 20;
      }
  }

  items = [];
  for (let i = 0; i < itemsCount; i++) {
      items.push(i);
  }
</script>
<div class="progress {className}">
  <div class="progress__title">{title}</div>
  <div class="progress__container">
    <div class="progress__value">{`$${shortenResult(value)}`}</div>
    <div class="progress__bar">
      {#each items as item }
        <div class="progress__item {item < active ? 'active' : ''}"></div>
      {/each}
    </div>
  </div>
</div>
<style lang="scss">
  @import 'src/scss/variables';
  @import 'src/scss/media';
  @import 'src/scss/mixins';

  .progress {
    border-radius: 12px;
    padding: 18px 16px;
    width: 100%;
    margin-top: -5px;
    margin-bottom: 14px;

    @include breakpoint-down('tabL') {
      padding: 16px;
      margin-top: -10px;
      margin-bottom: 24px;
    }

    &.grey-bg {
      background: #FFFFFF14;
      border: 1px solid #FFFFFF14;

      .progress {
        &__item {
          background: transparent;
          border: 1px solid #FF3737;

          &.active {
            background: #FF3737;
            border: #FF3737;
          }
        }
      }
    }

    &__title {
      font-family: $Suisse;
      font-weight: 400;
      font-size: 18px;
      line-height: 18px;
      margin-bottom: 12px;

      @include breakpoint-down('tabL') {
        font-size: 14px;
        line-height: 18px;
        margin-bottom: 8px;
      }
    }

    &__container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    &__value {
      font-family: $Suisse;
      font-weight: 500;
      font-size: 24px;
      line-height: 32px;
    }

    &__bar {
      display: flex;
      gap: 4px;
    }
    &__item {
      background: #FFFFFF54;
      border: 1px solid #FFFFFF54;
      border-radius: 2px;
      width: 8px;
      height: 20px;

      &.active {
        background: white;
        border: white;
      }
    }
  }
</style>