@props(['provider'])

<div class="overflow-hidden rounded-2xl border border-slate-200 dark:border-slate-800">
    <div class="flex items-center gap-3 border-b border-slate-200 bg-slate-50 px-5 py-4 dark:border-slate-800 dark:bg-slate-900">
        <span class="flex h-8 w-8 items-center justify-center rounded-full bg-brand-100 text-xs font-bold text-brand-700 dark:bg-brand-900/60 dark:text-brand-300">
            {{ Str::substr($provider->name, 0, 1) }}
        </span>
        <h3 class="font-semibold text-slate-900 dark:text-white">{{ $provider->name }}</h3>
    </div>

    @if ($provider->plans->isEmpty())
        <p class="px-5 py-6 text-sm text-slate-500 dark:text-slate-400">No plans currently available.</p>
    @else
        <ul class="divide-y divide-slate-100 dark:divide-slate-800">
            @foreach ($provider->plans as $plan)
                <li class="flex items-center justify-between px-5 py-3 text-sm">
                    <div>
                        <p class="font-medium text-slate-800 dark:text-slate-100">{{ $plan->name }}</p>
                        @if ($plan->validity_days)
                            <p class="text-xs text-slate-400">Valid for {{ $plan->validity_days }} days</p>
                        @endif
                    </div>
                    <span class="font-semibold text-brand-700 dark:text-brand-400">
                        &#8358;{{ number_format($plan->selling_price / 100, 2) }}
                    </span>
                </li>
            @endforeach
        </ul>
    @endif
</div>