Forge Firewall Rule Row code

@props([
    'port',
    'type' => 'TCP',
    'action' => 'Allow',
    'source' => 'Any',
    'description' => null,
    'protected' => false,
    'ipVersion' => 'IPv4',
])

@php
    /*
    | Firewall rule row for Forge network settings. Highlights protected rules
    | such as SSH so destructive actions can be visually restrained.
    |
    | Usage:
    |   <x-ui.forge-firewall-rule-row port="22" protected description="SSH" />
    */
    $isDeny = strtolower((string) $action) === 'deny';
@endphp

<div {{ $attributes->merge(['class' => 'flex min-w-0 flex-col gap-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-800 dark:bg-gray-900 lg:flex-row lg:items-center lg:justify-between']) }}>
    <div class="grid min-w-0 gap-3 sm:grid-cols-4 lg:flex-1">
        <div class="min-w-0">
            <p class="text-xs text-gray-500 dark:text-gray-400">Port</p>
            <p class="mt-1 truncate font-mono text-sm font-semibold text-gray-900 dark:text-white">{{ $port }}</p>
        </div>
        <div class="min-w-0">
            <p class="text-xs text-gray-500 dark:text-gray-400">Type</p>
            <p class="mt-1 truncate text-sm font-medium text-gray-900 dark:text-white">{{ $type }} / {{ $ipVersion }}</p>
        </div>
        <div class="min-w-0">
            <p class="text-xs text-gray-500 dark:text-gray-400">Source</p>
            <p class="mt-1 truncate text-sm font-medium text-gray-900 dark:text-white">{{ $source }}</p>
        </div>
        <div class="min-w-0">
            <p class="text-xs text-gray-500 dark:text-gray-400">Description</p>
            <p class="mt-1 truncate text-sm font-medium text-gray-900 dark:text-white">{{ $description ?? 'Custom rule' }}</p>
        </div>
    </div>

    <div class="flex shrink-0 flex-wrap items-center gap-2">
        <x-ui.badge :variant="$isDeny ? 'red' : 'green'" size="sm">{{ $action }}</x-ui.badge>
        @if ($protected)
            <x-ui.badge variant="amber" size="sm" icon="shield-warning">Protected</x-ui.badge>
        @endif
        {{ $actions ?? '' }}
    </div>
</div>