<template>
  <div>
    <h6 class="mb-3">Résumé du Devis</h6>
    <div class="d-flex justify-content-between">
      <span class="mb-2 text-sm">Total HT:</span>
      <span class="text-dark font-weight-bold ms-2">{{
        formatCurrency(ht)
      }}</span>
    </div>
    <div class="d-flex justify-content-between">
      <span class="text-sm">TVA:</span>
      <span class="text-dark ms-2 font-weight-bold">{{
        formatCurrency(tva)
      }}</span>
    </div>
    <div class="d-flex justify-content-between mt-4">
      <span class="mb-2 text-lg">Total TTC:</span>
      <span class="text-dark text-lg ms-2 font-weight-bold">{{
        formatCurrency(ttc)
      }}</span>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";

const props = defineProps({
  ht: [Number, String],
  tva: [Number, String],
  ttc: [Number, String],
});

const formatCurrency = (value) => {
  const numberValue = typeof value === 'string' ? parseFloat(value) : value;
  if (isNaN(numberValue)) return '0,00 €';
  
  return new Intl.NumberFormat("fr-FR", {
    style: "currency",
    currency: "EUR",
  }).format(numberValue);
};
</script>
