@props([
    'increase',
    'figure',
    'suffix',
    'prefix',
    'isdata' => 'false',
    'iscash' => 'false',
    'bgcolor' => 'bg-white',
])
<div class="flex rounded-xl p-2 py-2 text-black md:px-5 {{ $bgcolor }}">
    <div class="flex flex-col items-start justify-between w-full h-full px-2 space-y-2">
        <div class="flex flex-col justify-between w-full md:flex-row-reverse md:items-center">
            <p class="text-sm">{{ $prefix }}</p>
        </div>

        @if ($isdata == 'true')
            <h6>{{ number_format($figure) }} GB</h6>
        @elseif ($iscash == 'true')
            <h6>&#8373; {{ number_format($figure, 2) }}</h6>
        @else
            <h6>{{ number_format($figure) }}</h6>
        @endif

        @if (is_int($increase))
            <div class="flex flex-col space-x-1 text-sm md:flex-row">
                <div>
                    <span>{{ number_format($increase, 2) }}%</span>
                </div>
                <div class="text-gray-400">{{ $suffix }}</div>
            </div>
        @endif

    </div>

</div>
