@props([
    'value' => 0,
    'errorRate' => 0,
    'label' => '掌握度',
])

@php
    $percent = round(max(0, min(1, $value ?? 0)) * 100, 1);
    $errorPercent = round(max(0, min(1, $errorRate ?? 0)) * 100, 1);
    $tone = $percent >= 80 ? 'text-emerald-600' : ($percent >= 60 ? 'text-amber-600' : 'text-rose-600');
@endphp

<div class="rounded-xl border border-white/40 bg-white/70 shadow-sm backdrop-blur p-4">
    <div class="flex items-center justify-between mb-2">
        <div class="text-xs uppercase tracking-widest text-slate-500">{{ $label }}</div>
        <div class="text-lg font-semibold {{ $tone }}">{{ $percent }}%</div>
    </div>
    <div class="w-full h-2 rounded-full bg-slate-200 overflow-hidden">
        <div
            class="h-full rounded-full bg-gradient-to-r from-rose-400 via-amber-300 to-emerald-500 transition-all duration-500"
            style="width: {{ $percent }}%;"
        ></div>
    </div>
    <div class="mt-2 flex items-center justify-between text-[11px] text-slate-500">
        <span>错误率 {{ $errorPercent }}%</span>
        <span>
            {{ $percent >= 80 ? '稳固' : ($percent >= 60 ? '可提升' : '需巩固') }}
        </span>
    </div>
</div>