<script setup lang="ts">
import { AccountJournalEntryType, type AccountHistoryJournalEntryItem } from '@/api/account'
import { formatMoney } from '@/api/data'
import AppBadge from '../common/AppBadge.vue'

defineProps<{ item: AccountHistoryJournalEntryItem }>()
</script>
<template>
  <div>
    <AppBadge class="font-mono">{{ formatMoney(item.amount, item.currency) }}</AppBadge>
    <span
      v-if="item.journalEntryType === AccountJournalEntryType.DEBIT"
      class="font-bold text-positive"
    >
      debited
    </span>
    <span
      v-if="item.journalEntryType === AccountJournalEntryType.CREDIT"
      class="font-bold text-negative"
    >
      credited
    </span>
    to this account via Transaction #{{ item.transactionId }}.

    <br />
    <p class="font-size-xsmall m0 mt-1">
      <span class="text-muted">Description: </span>{{ item.transactionDescription }}
    </p>
  </div>
</template>
