<script setup lang="ts">
import {formatIsk} from "@/formaters";
import {computed} from "vue";

interface Props {
  amount: number;
  colored?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  colored: true,
});

const computedClass = computed(() => {
  if (!props.colored) {
    return "";
  }

  return props.amount >= 0 ? 'text-emerald-400' : 'text-amber-700';
})
</script>

<template>
  <span :class="computedClass">{{ formatIsk(amount) }}</span>
</template>