@props(['kes', 'usd' => 0])

{{-- Reactive course price: shows the active currency (default USD), updates on currency change.
     Uses the exact USD price when in USD, otherwise scales the KES price by the MW factor. --}}
<span
    x-data="{
        kes: {{ (int) $kes }},
        usd: {{ (int) ($usd ?: 0) }},
        txt: @js($kes > 0 ? '$'.number_format($usd ?: round($kes * 0.0078)) : 'Free'),
        render() {
            if (this.kes <= 0) { this.txt = 'Free'; return; }
            this.txt = (window.MW.code() === 'USD' && this.usd > 0)
                ? window.MW.fmt(this.usd)
                : window.MW.fmt(this.kes * window.MW.factor());
        },
    }"
    x-init="render()"
    @currency-changed.window="render()"
    x-text="txt"
>{{ $kes > 0 ? '$'.number_format($usd ?: round($kes * 0.0078)) : 'Free' }}</span>