@props(['product', 'category', 'currency' => 'TL', 'clickable' => true])

@if($product->image)
<!-- PRODUCT WITH IMAGE -->
<div class="flex justify-between p-2 {{ $clickable ? 'cursor-pointer hover:bg-stone-50 add-to-cart-btn' : '' }} select-none"
    @if($clickable) data-product-id="{{ $product->id }}" data-product-name="{{ $product->name }}"
    data-product-price="{{ $product->gross_price }}" data-category-id="{{ $category->id }}" @endif>
    <div class="flex-1 p-1 gap-y-1">
        <h4>{{ $product->name }}</h4>
        @if($product->description)
        <p class="text-xs italic text-stone-500">{{ $product->description }}</p>
        @endif
        <p class="text-2xl">
            {{ number_format($product->gross_price, 0, ',', '.') }}<span class="text-sm ml-0.5 uppercase">{{
                $currency ?? 'TL' }}</span>
        </p>
    </div>
    <div class="flex-shrink-0 ml-4">
        <img class="object-cover w-32 h-32 rounded-lg text-stone-300 border-stone-200"
            src="{{ asset('storage/' . str_replace('uploads/', '', $product->image->url)) }}"
            alt="{{ $product->name }}">
    </div>
</div>
@else
<!-- PRODUCT WITHOUT IMAGE -->
<div class="flex justify-between p-1 {{ $clickable ? 'cursor-pointer hover:bg-stone-50 add-to-cart-btn' : '' }} select-none"
    @if($clickable) data-product-id="{{ $product->id }}" data-product-name="{{ $product->name }}"
    data-product-price="{{ $product->gross_price }}" data-category-id="{{ $category->id }}" @endif>
    <div class="flex-1 p-2">
        <h4>{{ $product->name }}</h4>
        @if($product->description)
        <p class="mt-1 text-xs italic text-stone-500">{{ $product->description }}</p>
        @endif
    </div>
    <div class="flex items-center flex-shrink-0">
        <p class="text-lg">
            {{ number_format($product->gross_price, 0, ',', '.') }}<span class="text-xs ml-0.5 uppercase">{{
                $currency ?? 'TL' }}</span>
        </p>
    </div>
</div>
@endif