Forge Certificate Status Card code

@props([
    'domain',
    'type' => 'Let\'s Encrypt',
    'status' => 'Valid',
    'statusVariant' => 'green',
    'expiresAt' => null,
    'issuer' => null,
    'verification' => null,
    'autoRenews' => true,
    'wildcard' => false,
])

@php
    /*
    | Certificate status card for Let's Encrypt, custom, CSR and cloned certs.
    | Keeps expiry, issuer, verification and renewal state visible together.
    |
    | Usage:
    |   <x-ui.forge-certificate-status-card domain="example.com" expires-at="Aug 21, 2026" />
    */
@endphp

<article {{ $attributes->merge(['class' => 'min-w-0 rounded-xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900']) }}>
    <div class="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
        <div class="min-w-0">
            <p class="truncate text-base font-semibold text-gray-900 dark:text-white">{{ $domain }}</p>
            <p class="mt-1 truncate text-xs text-gray-500 dark:text-gray-400">{{ $type }}</p>
        </div>

        <x-ui.badge :variant="$statusVariant" size="sm" dot class="w-fit sm:shrink-0">{{ $status }}</x-ui.badge>
    </div>

    <dl class="mt-5 grid gap-3 text-sm sm:grid-cols-2">
        @foreach ([
            'Expires' => $expiresAt,
            'Issuer' => $issuer,
            'Verification' => $verification,
            'Renewal' => $autoRenews ? 'Automatic' : 'Manual',
        ] as $label => $item)
            @if ($item)
                <div class="min-w-0 rounded-lg bg-gray-50 p-3 dark:bg-gray-950/40">
                    <dt class="text-xs text-gray-500 dark:text-gray-400">{{ $label }}</dt>
                    <dd class="mt-1 truncate font-medium text-gray-900 dark:text-white">{{ $item }}</dd>
                </div>
            @endif
        @endforeach
    </dl>

    <div class="mt-4 flex flex-wrap gap-2">
        @if ($wildcard)
            <x-ui.badge variant="blue" size="sm">Wildcard</x-ui.badge>
        @endif
        @if (! $autoRenews)
            <x-ui.badge variant="amber" size="sm">Manual renewal</x-ui.badge>
        @endif
    </div>

    @isset($actions)
        <div class="mt-5 flex flex-wrap gap-2 border-t border-gray-100 pt-4 dark:border-gray-800">
            {{ $actions }}
        </div>
    @endisset
</article>