@props([
    'version',
    'serviceName',
    'status',
    'color',
])

<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:16px;">
    <div style="background:#f8fafc;border-radius:12px;padding:16px;border:1px solid #e2e8f0;">
        <div style="font-size:12px;color:#64748b;margin-bottom:4px;">Versie</div>
        <div style="font-size:20px;font-weight:700;color:#1e293b;">{{ $version }}</div>
    </div>
    <div style="background:#f8fafc;border-radius:12px;padding:16px;border:1px solid #e2e8f0;">
        <div style="font-size:12px;color:#64748b;margin-bottom:4px;">Service</div>
        <div style="font-size:20px;font-weight:700;color:#1e293b;">{{ $serviceName }}</div>
    </div>
    <div style="background:{{ $color }}15;border-radius:12px;padding:16px;border:1px solid {{ $color }}30;grid-column:span 2;">
        <div style="font-size:12px;color:#64748b;margin-bottom:4px;">Status</div>
        <div style="font-size:24px;font-weight:700;color:{{ $color }};">● {{ $status }}</div>
    </div>
</div>