<script setup lang="ts">

import {isCombined, Ledger, systemLedger} from "@/ledger/ledger.ts";
import {FolderOpenIcon} from '@heroicons/vue/24/outline';
import {RouterLink} from "vue-router";
import {routeNames} from "@/routes";

interface Props {
  ledger: Ledger;
  link?: boolean;
}

const props = defineProps<Props>();
</script>

<template>
  <div class="flex">
    <FolderOpenIcon v-if="isCombined(ledger)" class="w-4 me-1" />
    <div v-else class="w-4 me-1"/>
    <RouterLink v-if="link" :to="{name: routeNames.viewLedger, params: {ledgerId: ledger.ledgerId}}">{{ ledger.name }}</RouterLink>
    <span v-else :class="{'system-ledger': ledger === systemLedger}">{{ ledger.name }}</span>
  </div>
</template>

<style scoped>
@reference "@/style.css";

.system-ledger {
  @apply text-emerald-400;
}
</style>
