<template>
  <div class="card p-card">
    <h4 class="card-custom-title">
      {{ $t(i18nConst.bondingGraphTitle) }}
    </h4>
    <hr>
    <div class="row">
      <div class="col-12 d-flex justify-content-center">
        <div class="text-center">
          <p style="font-weight: bold;">{{ $t(i18nConst.bondingGraphBuyPrice) }}</p>
          <p>{{ utils.formatDisplayAmount(parseFloat(metadexToUsdcPrice).toFixed(4)) }} USDC</p>
          <!-- <p>{{ utils.formatDisplayAmount(parseFloat(metadexToMaticPrice).toFixed(4)) }} MATIC</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 '@/components/bonding/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";
import typeActions from "@/store/typeActions";

export default {
  name: "LpGraph",
  data() {
    return {
      i18nConst: i18nConstantes,
      constantes: constantes,
      utils: web3Utils,
    }
  },
  // components: {
  //   LineChart
  // },
  computed: {
    ...mapGetters("liquidityPool", ["metadexToUsdcPrice", "metadexToMaticPrice"]),
  },
  mounted() {
    this.$store.dispatch(typeActions.updateMetadexToUsdcPrice);
    // this.$store.dispatch(typeActions.updateMetadexToMaticPrice);
  }
}
</script>

<style scoped>

</style>