@props(['defaultPeriod' => 'yearly', 'monthsFree' => null])

@php
    $monthsFree = $monthsFree ?? pricing()->monthsFree('Reply');
    $showYearly = $defaultPeriod === 'yearly';
@endphp

<div {{ $attributes->merge(['class' => 'flex flex-col items-center mb-10 mt-6']) }}>
    <div class="inline-flex items-center bg-gray-100 dark:bg-gray-800 rounded-full p-1 shadow-sm">
        <button type="button" data-pricing-period="monthly"
            class="pricing-period-btn px-8 py-2.5 rounded-full text-sm font-bold transition-all duration-200 {{ $showYearly ? 'text-gray-600 dark:text-gray-400' : 'bg-blue-600 text-white shadow-md' }}">
            Monthly
        </button>
        <button type="button" data-pricing-period="yearly"
            class="pricing-period-btn px-8 py-2.5 rounded-full text-sm font-bold transition-all duration-200 {{ $showYearly ? 'bg-blue-600 text-white shadow-md' : 'text-gray-600 dark:text-gray-400' }}">
            Yearly
            @if ($monthsFree > 0)
                <span class="ml-2 text-xs text-green-600 dark:text-green-400 font-bold">{{ $monthsFree }} months free</span>
            @endif
        </button>
    </div>
</div>