<script lang="ts">
    let {
        donnees,
    }: {
        donnees?: {
            projets: number
            puissance: number
            economies: number
        }
    } = $props()
    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="flex justify-around text-primary p-5">
            <div class="flex flex-col justify-between text-center">
                <div
                    class="pb-3 mb-3 border-b-4 border-primary text-4xl font-bold">
                    {donnees.projets}
                </div>
                <div class="text-xl">Simulations</div>
            </div>

            <div class="flex-column justify-content-between text-center mx-3">
                <div
                    class="pb-3 mb-3 border-b-4 border-primary text-4xl font-bold">
                    {format(donnees.puissance)}
                </div>
                <div class="text-xl">Simulés</div>
            </div>
        </div>
    </div>
{/if}