@props([
    'id',
    'name',
    'description',
    'icon',
    'configured' => false,
    'infoOnly' => false,
])

@once
    @push('styles')
    <style>
        .integration-card {
            cursor: pointer;
            transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
        }
        .integration-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08) !important;
        }
        .integration-card:focus-visible {
            outline: 2px solid var(--bs-primary);
            outline-offset: 2px;
        }
        .integration-card-icon {
            width: 48px;
            height: 48px;
            background: rgba(var(--bs-primary-rgb), .08);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: .5rem;
            flex-shrink: 0;
        }
    </style>
    @endpush
@endonce

<div class="col-12 col-md-6 col-xl-4">
    <div class="card border-0 shadow-sm h-100 integration-card rounded-3"
         role="button"
         tabindex="0"
         data-bs-toggle="modal"
         data-bs-target="#integration-modal-{{ $id }}">
        <div class="card-body p-3">
            <div class="d-flex align-items-start gap-3">
                <div class="integration-card-icon">
                    <i class="{{ $icon }} fa-lg text-primary"></i>
                </div>

                <div class="flex-grow-1 min-w-0">
                    <div class="d-flex align-items-center justify-content-between gap-2 mb-1">
                        <h6 class="fw-semibold mb-0 text-truncate">{{ $name }}</h6>

                        @if($infoOnly)
                            <span class="badge bg-info-subtle text-info flex-shrink-0">
                                <i class="fas fa-info-circle me-1"></i>Info
                            </span>
                        @elseif($configured)
                            <span class="badge bg-success-subtle text-success flex-shrink-0">
                                <i class="fas fa-check-circle me-1"></i>{{ __('admin/settings.integrations_status_configured') }}
                            </span>
                        @else
                            <span class="badge bg-secondary-subtle text-secondary flex-shrink-0">
                                <i class="fas fa-circle me-1"></i>{{ __('admin/settings.integrations_status_not_configured') }}
                            </span>
                        @endif
                    </div>

                    <p class="text-muted small mb-0">{{ $description }}</p>
                </div>
            </div>
        </div>
    </div>
</div>
