@props([
    'card' => [],
    'title' => null,
    'unitsSuffix' => false,
    'periodLabel' => 'This month',
])

@php
    $card = is_array($card) ? $card : [];
    $hasTarget = (bool) ($card['has_target'] ?? true);
    $status = $hasTarget
        ? (string) ($card['status'] ?? 'neutral')
        : 'green';
    $percentage = (int) ($card['percentage'] ?? 0);
    $circlePercent = $hasTarget ? min(max($percentage, 0), 100) : 100;

    $cardTitle = $title ?? (string) ($card['label'] ?? '');
    $displayActual = (string) ($card['display_actual'] ?? '0');
    $displayTarget = (string) ($card['display_target'] ?? 'No target');
    $centerValue = $hasTarget
        ? $percentage.'%'
        : $displayActual;
@endphp

<x-dashboard.circular-metric
    :title="$cardTitle"
    :center-value="$centerValue"
    :percentage="$circlePercent"
    :status="$status"
    size="default"
    {{ $attributes->merge(['class' => 'py-4']) }}
>
    <x-slot name="footer">
        <div class="text-sm font-semibold text-gray-900">
            @if ($hasTarget)
                {{ $displayActual }}
                <span class="text-gray-400 font-normal">/</span>
                {{ $displayTarget }}@if ($unitsSuffix) units @endif
            @else
                {{ $displayActual }}
            @endif
        </div>
        <div class="text-xs text-gray-500 mt-0.5">
            {{ $periodLabel }}
        </div>
    </x-slot>
</x-dashboard.circular-metric>