@props([
    'title' => '',
    'centerValue' => '0',
    'percentage' => 0,
    'status' => 'green',
    'size' => 'default',
])

@php
    $circlePercent = min(max((float) $percentage, 0), 100);

    $sizeConfig = match ($size) {
        'compact' => [
            'wrapper' => 'h-32 w-32',
            'radius' => 38,
            'stroke' => 9,
            'center' => 'text-xl',
            'title' => 'text-xs font-semibold text-gray-900 mb-2 text-center',
        ],
        default => [
            'wrapper' => 'h-48 w-48',
            'radius' => 52,
            'stroke' => 12,
            'center' => 'text-3xl',
            'title' => 'text-sm font-semibold text-gray-900 mb-3 text-center',
        ],
    };

    $radius = $sizeConfig['radius'];
    $circumference = 2 * M_PI * $radius;
    $strokeDashoffset = $circumference * (1 - ($circlePercent / 100));

    $ringClass = match ($status) {
        'red' => 'text-red-600',
        'yellow' => 'text-yellow-500',
        'amber' => 'text-amber-600',
        'green' => 'text-green-600',
        default => 'text-gray-400',
    };

    $percentTextClass = match ($status) {
        'red' => 'text-red-700',
        'yellow' => 'text-yellow-700',
        'amber' => 'text-amber-700',
        'green' => 'text-green-700',
        default => 'text-gray-600',
    };
@endphp

<div {{ $attributes->merge(['class' => 'flex flex-col items-center justify-center py-2']) }}>
    @if ($title !== '')
        <h3 class="{{ $sizeConfig['title'] }}">
            {{ $title }}
        </h3>
    @endif

    <div class="relative {{ $sizeConfig['wrapper'] }} shrink-0">
        <svg class="h-full w-full -rotate-90" viewBox="0 0 120 120" aria-hidden="true" role="img">
            <circle
                cx="60"
                cy="60"
                r="{{ $radius }}"
                stroke="currentColor"
                stroke-width="{{ $sizeConfig['stroke'] }}"
                fill="none"
                class="text-gray-200"
            />
            <circle
                cx="60"
                cy="60"
                r="{{ $radius }}"
                stroke="currentColor"
                stroke-width="{{ $sizeConfig['stroke'] }}"
                fill="none"
                stroke-linecap="round"
                class="{{ $ringClass }} transition-all duration-500 ease-out"
                stroke-dasharray="{{ $circumference }}"
                stroke-dashoffset="{{ $strokeDashoffset }}"
            />
        </svg>

        <div class="absolute inset-0 flex items-center justify-center text-center px-3 pointer-events-none">
            <div class="{{ $sizeConfig['center'] }} font-bold leading-none {{ $percentTextClass }}">
                {{ $centerValue }}
            </div>
        </div>
    </div>

    @if (isset($footer))
        <div class="mt-2 text-center">
            {{ $footer }}
        </div>
    @endif
</div>