<script lang="ts">
    export let donnees:
        | undefined
        | {
              projets: number
              puissance: number
              economies: number
          }
    let fmt = (n: number) =>
        Intl.NumberFormat('fr-FR', { maximumFractionDigits: n })

    function format(x: number) {
        let f = 0
        let s = ''
        if (Math.abs(x) <= 1000) {
            s = ' kWc'
            f = x
        } else if (Math.abs(x) <= 1000000) {
            s = ' MWc€'
            f = x / 1000
        } else {
            s = ' GWc'
            f = x / 1000000
        }
        return fmt(2).format(f) + s
    }
</script>

{#if donnees}
    <div class="my-5 py-2">
        <div class="row">
            <div class="d-flex justify-content-around text-primary p-5">
                <div class="flex-column justify-content-between text-center">
                    <div
                        class="pb-3 mb-3 border-bottom border-4 border-primary fs-1 fw-bold bg-cc">
                        {donnees.projets}
                    </div>
                    <div>Simulations</div>
                </div>

                <div
                    class="flex-column justify-content-between text-center mx-3">
                    <div
                        class="pb-3 mb-3 border-bottom border-4 border-primary fs-1 fw-bold bg-cc fs-1 fw-bold">
                        {format(donnees.puissance)}
                    </div>
                    <div>Simulés</div>
                </div>

                <div class="flex-column justify-content-between text-center">
                    <div
                        class="pb-3 mb-3 border-bottom border-4 border-primary fs-1 fw-bold bg-cc fs-1 fw-bold">
                        +{Math.round(donnees.economies / 1000)}k€
                    </div>
                    <div>Economies consomateur</div>
                </div>
            </div>
        </div>
    </div>
{/if}