@props(['name', 'value', 'duration' => '', 'isMoney' => false])
<div {{ $attributes->merge(['class' => 'w-1/3 px-3 py-2 text-white rounded-lg bg-blue-700']) }}>
    <div class="metric-header flex justify-between">
        <span class="text-sm capitalize">Total {{ $name }}</span>
        <span class="text-xs capitalize">{{ str_replace('_', ' ', $duration) }}</span>
    </div>
        <div class="metric-body mt-3 flex justify-center">
        <span class="text-sm">{{ $isMoney ? '₦' : '' }}</span>
        <span @class([
            'value text-thin text-3xl',
            'text-red-600' => $negativeChange,
            'text-gray-500' => $neutralChange,
            'text-green-600' => $name == 'profit' or $positiveChange,
        ])>
            {{ $value ?? $slot }}
        </span>
    </div>

    @if ($name == 'sales')
        <div class="">
            {{ author()->totalBookSold($duration) }} books sold
        </div>
    @endif

</div>