<template>
  <div class="container is-max-desktop">
    <section class="section is-small px-0">
      <template v-if="nearlyCompletedFunds.length > 0">
        <div class="title is-4 has-text-white-ter has-text-centered">Nearly Completed Funds</div>
        <div v-for="(fund, ind) in nearlyCompletedFunds" :key="ind">
          <RouterLink :to="`/fund/${fund.id}`">
            <FundLink :fund="fund" :aside="`${round(fund.raised/fund.amountAvailable*100)}%`"/>
          </RouterLink>
        </div>
      </template>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { getNearlyCompletedFunds } from '@/api/composed';
import FundLink from '@/components/FundLink.vue';
import { NearlyCompletedFund } from '@/api/types';

const nearlyCompletedFunds = ref([] as NearlyCompletedFund[]);

const pctThreshold = 85;

const req = await getNearlyCompletedFunds(pctThreshold);
if (req?.funds) {
  nearlyCompletedFunds.value = req?.funds;
}

const round = (float: number, digits = 1) => {
  const factor = 10 ** digits;
  return Math.round(float * factor) / factor;
};
</script>

<style scoped lang="stylus">

</style>
