<template>
  <div class="card p-card">
    <h4 class="card-custom-title">
      {{ $t(i18nConst.bondingGraphTitle) }}
    </h4>
    <hr>
    <div class="row">
      <div class="col-6 d-flex justify-content-center">
        <div class="text-center">
          <p style="font-weight: bold;">{{ $t(i18nConst.bondingGraphBuyPrice) }}</p>
          <p>{{utils.formatDisplayAmount(parseFloat(buyPrice).toFixed(4))}} USDC</p>
        </div>
      </div>
      <div class="col-6 d-flex justify-content-center">
        <div class="text-center">
          <p style="font-weight: bold;">{{ $t(i18nConst.bondingGraphTotalSupply) }}</p>
          <p>{{ utils.formatDisplayAmount(totalSupply) }} METADEX</p>
        </div>
      </div>
    </div>
    <hr>
    <div class="row">
      <div class="col-12">
        <line-chart class="p-3"></line-chart>
      </div>
    </div>
  </div>
</template>

<script>
import LineChart from './LineChart';
import i18nConstantes from "@/constantes/i18n.constantes.js";
import constantes from "@/constantes/constantes.js";
import { mapGetters } from "vuex";
import web3Utils from "@/utils/web3.utils.js";

export default {
  data() {
    return {
      i18nConst: i18nConstantes,
      constantes: constantes,
      utils: web3Utils,
    }
  },
  components: {
    LineChart
  },
  computed: {
    ...mapGetters("bonding", [
      "totalSupply", "buyPrice"
    ]),
  }
}
</script>

<style scoped>

</style>