@props(['deal' => '', 'broker' => ''])
<x-ui.image-card :image="asset('storage/'.$deal->image)">
    <div class="bg-white pt-8 p-4 h-full space-y-4 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 :id="$deal->id" />
        </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 :count="200">
                    <x-heroicon-o-heart class="w-4"/>
                </x-dashboard.user.stat-badge>

                <x-dashboard.user.stat-badge :count="433">
                    <x-heroicon-o-arrow-top-right-on-square class="w-4"/>
                </x-dashboard.user.stat-badge>
            </div>
            <x-ui.button variant="neutral" class="flex space-x-2 items-center">
                <p>View Deal</p>
                <x-heroicon-o-arrow-top-right-on-square class="w-5 ml-1"/>
            </x-ui.button>
        </div>
    </div>
</x-ui.image-card>