<script lang="ts">
  import i18n from '$lib/i18n'

  let props: {
    title: string
    icon: string
    value: number
    previousValue: number
    unit?: string
  } = $props()

  let diff = $derived(
    Math.round(((props.previousValue - props.value) / props.previousValue) * 100 * 10 * -1) / 10
  )
</script>

<div class="card bg-base-100 shadow rounded-md basis-0 grow">
  <div class="card-body gap-2">
    <div class="flex items-start justify-between gap-2 text-sm">
      <div>
        <p class="text-base-content/80 font-medium">
          {props.title}
        </p>
        <div class="mt-3 flex items-center gap-2">
          <p class="text-2xl font-semibold">
            {props.value}{#if props.unit}{' ' + props.unit}{/if}
          </p>
          {#if !Number.isNaN(diff)}
            {#if diff > 0}
              <div class="badge badge-outline badge-success badge-sm gap-0.5 px-1 font-medium">
                <i class="bi bi-arrow-up-right"></i>{diff}%
              </div>
            {:else if diff < 0}
              <div class="badge badge-outline badge-error badge-sm gap-0.5 px-1 font-medium">
                <i class="bi bi-arrow-down-right"></i>{diff}%
              </div>
            {:else}
              <div class="badge badge-outline badge-warning badge-sm gap-0.5 px-1 font-medium">
                <i class="bi bi-arrow-right"></i>{diff}%
              </div>
            {/if}
          {/if}
        </div>
      </div>
      <i class="bi {props.icon} text-primary text-4xl"></i>
    </div>
    <p class="text-base-content/60 text-sm">
      {$i18n.t('dashboard:cards.lastMonth', { val: props.previousValue, unit: props.unit })}
    </p>
  </div>
</div>
