@props(['title', 'value', 'change' => null, 'suffix' => '', 'subtitle' => null])

<div class="rounded-xl border border-stroke bg-white p-6 shadow-default dark:border-strokedark dark:bg-boxdark">
    <div class="text-sm font-medium text-black dark:text-white mb-2">{{ $title }}</div>
    <div class="flex items-end justify-between">
        <div>
            <h4 class="text-title-md font-bold text-black dark:text-white mb-1">
                {{ $value }}{{ $suffix }}
            </h4>
            @if($subtitle)
                <span class="text-xs text-meta-3">{{ $subtitle }}</span>
            @endif
        </div>
        @if($change && isset($change['percentage']))
            <span class="flex items-center gap-1 text-sm font-medium
                {{ $change['direction'] === 'up' ? 'text-meta-3' : '' }}
                {{ $change['direction'] === 'down' ? 'text-meta-1' : '' }}
                {{ $change['direction'] === 'neutral' ? 'text-meta-5' : '' }}">
                @if($change['direction'] === 'up')
                    <svg class="fill-meta-3" width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.35716 2.47737L0.908974 5.82987C0.736467 5.99862 0.736467 6.28112 0.908974 6.44987C1.08148 6.61862 1.37273 6.61862 1.54523 6.44987L4.64742 3.43987V10.0899C4.64742 10.3337 4.84429 10.5399 5.09773 10.5399C5.35117 10.5399 5.54804 10.3337 5.54804 10.0899V3.43987L8.65023 6.44987C8.82273 6.61862 9.11398 6.61862 9.28648 6.44987C9.45898 6.28112 9.45898 5.99862 9.28648 5.82987L5.83829 2.47737C5.66579 2.30862 5.37454 2.30862 5.20204 2.47737H4.35716Z" fill=""/>
                    </svg>
                @elseif($change['direction'] === 'down')
                    <svg class="fill-meta-1" width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.64284 7.69237L9.09102 4.33987C9.26352 4.17112 9.26352 3.88862 9.09102 3.71987C8.91852 3.55112 8.62727 3.55112 8.45477 3.71987L5.35258 6.72987V0.0798597C5.35258 -0.163889 5.15571 -0.369889 4.90227 -0.369889C4.64883 -0.369889 4.45196 -0.163889 4.45196 0.0798597V6.72987L1.34977 3.71987C1.17727 3.55112 0.886019 3.55112 0.713519 3.71987C0.541019 3.88862 0.541019 4.17112 0.713519 4.33987L4.16171 7.69237C4.33421 7.86112 4.62546 7.86112 4.79796 7.69237H5.64284Z" fill=""/>
                    </svg>
                @endif
                {{ abs($change['percentage']) }}%
            </span>
        @endif
    </div>
</div>