@props(['image', 'lotto', 'amount', 'member', 'date', 'id'])

<div class="w-full p-2 text-white">
    <div
        class="rounded-md overflow-hidden border-2 border-(--border-gradient) bg-gradient-to-b from-(--gradient-from) via-(--gradient-via) to-(--gradient-to) h-[555px] flex flex-col">
        <div>
            <img src="{{ theme()->storage($image) }}" class="w-full" />
        </div>
        <div class="p-4 flex flex-col gap-4 justify-between flex-1">
            <div>
                <h5 class="text-xl font-medium mb-2">
                    {{ setting('general.app_name') }} JACKPOT {{ $lotto }}
                    {{ format()->rupiah($amount) }} LUNAS
                </h5>
                <time>
                    <p class="time-post uppercase"><i class="lni lni-timer"></i> {{ $date }}</p>
                </time>
                <div>
                    Selamat Kepada Member
                    <span class="font-bold">{{ strtoupper(setting('general.app_name')) }}</span>
                    <span class="font-bold">{{ strtoupper(format()->maskUsername($member)) }}</span>
                    Telah Jackpot Di
                    <span class="font-bold">{{ strtoupper($lotto) }}</span>
                </div>
            </div>
            <div class="grid">
                <a href="{{ route('detail', $id) }}"
                    class="inline-flex items-center justify-center gap-1 text-sm font-bold text-white  bg-gradient-to-t shadow-xs shadow-violet-950 from-[#5801a0] to-[#a537ff]  px-4 py-2 rounded">
                    <i class="lni lni-cash-app"></i> Read More
                </a>
            </div>
        </div>
    </div>
</div>