@props([
    'currency' => 'GHS',
    'monthlyMinor' => 0,
    'prepaidMinor' => null,
    'monthlyDisplay' => null,
    'monthlySuffix' => '/mo',
    'dark' => false,
])

@php
    $prepaidBase = (int) ($prepaidMinor ?? $monthlyMinor);
    $monthlyFormatted = $monthlyDisplay ?? number_format((int) $monthlyMinor / 100, 0);
    $muted = $dark ? 'text-slate-300' : 'text-slate-500';
    $text = $dark ? 'text-white' : 'text-slate-900';
@endphp

<p {{ $attributes->merge(['class' => "mt-2 text-3xl font-bold {$text}"]) }}>
    <span x-show="billing === 'monthly'">{{ $currency }} {{ $monthlyFormatted }}<span class="text-base font-medium {{ $muted }}">{{ $monthlySuffix }}</span></span>
    <span x-show="billing !== 'monthly'" x-cloak>
        <span x-text="'{{ $currency }} ' + ({{ $prepaidBase }} * billing / 100).toLocaleString()"></span>
        <span class="block text-base font-medium {{ $muted }}" x-text="'for ' + billing + ' months'"></span>
    </span>
</p>