@props(['desc', 'amount', 'function'])
<div
    class="flex items-center justify-between p-3 my-1 space-x-3 bg-white border-l-4 rounded-lg shadow-lg border-bg-variant focus:border-none hover:bg-yellow-100">
    <div class="flex items-center justify-start w-3/4 space-x-3">
        <p class="text-lg font-bold text-black md:text-base">{{ $desc }} <span
                class="text-sm text-tx-variant"></span></p>
        <p class="font-bold">---</p>
        <p class="text-lg font-bold text-black md:text-base"><span
                class="mx-2 text-sm text-tx-variant">GHS</span>{{ number_format($amount, 2) }} </p>
    </div>
    <div class="flex items-center">
        <button class="px-4 py-2 text-white rounded-lg bg-secondary hover:bg-yellow-600"
            wire:click="{{ $function }}">Choose</button>
    </div>
</div>