@props(['deal' => '', 'broker' => ''])
<x-ui.image-card class="deal-identifier deal-card shadow-lg cursor-pointer" :image="asset('storage/'.$deal->image)" data-deal-id="{{$deal->id}}">
    <div class="bg-white pt-8 p-4 h-full space-y-2 flex flex-col justify-between">
        <div class="flex justify-between">
            <x-ui.button-sm variant="neutral">
                {{$deal->category->name}}
            </x-ui.button-sm>
            <x-dashboard.user.action-toolbar :deal_title="$deal->title" :deal_id="$deal->id" :is-liked="$deal->is_liked" :is-favourite="$deal->is_favorite" />
        </div>

        <p class="font-bold text-lg ">{{$deal->title}}</p>

        <p class="text-sm text-accent-600 wrap-break-word">{{$deal->description}}</p>

        <x-dashboard.user.broker-contact :broker="$broker"/>

        <div class="flex justify-between items-center">
            <div class="flex space-x-3">
                <x-dashboard.user.stat-badge id="{{'likeBadge'.$deal->id}}" :count="$deal->total_likes">
                    <x-heroicon-o-heart class="w-4"/>
                </x-dashboard.user.stat-badge>

                <x-dashboard.user.stat-badge  id="{{'redirectBadge'.$deal->id}}" :count="$deal->total_redirection">
                    <x-heroicon-o-arrow-top-right-on-square class="w-4"/>
                </x-dashboard.user.stat-badge>
            </div>
            @if(filled($deal->link))
                <x-ui.button onclick="redirect('{{\Illuminate\Support\Facades\URL::signedRoute('redirect', $deal->id)}}', {{$deal->id}})" variant="neutral" class="flex space-x-2 items-center mt-2">
                    <p>View Deal</p>
                    <x-heroicon-o-arrow-top-right-on-square class="w-5 ml-1"/>
                </x-ui.button>
            @endif
        </div>
    </div>
</x-ui.image-card>