@props([
    'score' => null,
    'parameters' => [],
    'auditUrl' => null,
    'modelClass' => null,
    'modelId' => null,
])

<div {{ $attributes->merge(['class' => 'rounded-lg border border-slate-200 bg-white p-4']) }}>
    <div class="mb-3 flex items-center justify-between gap-3">
        <h3 class="text-sm font-semibold text-slate-800">SEO Score</h3>
        @if (! is_null($score))
            <span class="rounded-full px-3 py-1 text-sm font-bold {{ $score >= 80 ? 'bg-green-100 text-green-800' : ($score >= 60 ? 'bg-amber-100 text-amber-800' : 'bg-red-100 text-red-800') }}">
                {{ $score }}/100
            </span>
        @else
            <span class="text-xs text-slate-500">Not audited</span>
        @endif
    </div>

    @if ($auditUrl && $modelClass && $modelId)
        <form method="POST" action="{{ $auditUrl }}" class="mb-3">
            @csrf
            <input type="hidden" name="model_class" value="{{ $modelClass }}">
            <input type="hidden" name="model_id" value="{{ $modelId }}">
            <button type="submit" class="text-sm text-blue-700 hover:underline">Recalculate</button>
        </form>
    @endif

    @if (count($parameters))
        <div class="max-h-64 space-y-2 overflow-y-auto text-xs">
            @foreach ($parameters as $param)
                <div class="flex items-start justify-between gap-2 rounded border border-slate-100 px-2 py-1.5">
                    <div>
                        <p class="font-medium text-slate-700">{{ str_replace('_', ' ', $param['key'] ?? '') }}</p>
                        <p class="text-slate-500">{{ $param['message'] ?? '' }}</p>
                    </div>
                    <span class="shrink-0 rounded px-1.5 py-0.5 {{ ($param['status'] ?? '') === 'pass' ? 'bg-green-100 text-green-700' : (($param['status'] ?? '') === 'warn' ? 'bg-amber-100 text-amber-700' : 'bg-red-100 text-red-700') }}">
                        {{ $param['score'] ?? 0 }}
                    </span>
                </div>
            @endforeach
        </div>
    @endif
</div>