<script lang="ts" setup>
import { computed } from 'vue';
import { useBudgetsStore } from '../stores/budget';
import { Account } from '../stores/budget-account';

const props = defineProps<{
  account: Account
}>();

const budgetStore = useBudgetsStore();
const CurrentBudgetID = computed(() => budgetStore.CurrentBudgetID);

const days = 24 * 60 * 60 * 1000;
function daysSinceLastReconciled() {
  const now = new Date().getTime();
  const diff = new Date(now).getTime() - props.account.LastReconciled.Time.getTime();
  return Math.floor(diff / days);
}
</script>

<template>
  <span>
  <router-link 
    :to="'/budget/' + CurrentBudgetID + '/account/' + account.ID">
    {{account.Name}}
  </router-link>
    <span v-if="props.account.LastReconciled.Valid && daysSinceLastReconciled() > 7" class="font-bold bg-gray-500 rounded-md text-sm px-2 mx-2 py-1 no-underline">
      {{daysSinceLastReconciled()}}
    </span>
  </span>
</template>