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

@if($product->image)
<!-- PRODUCT WITH IMAGE -->
<div class="flex justify-between border-t {{ $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 gap-y-1 pt-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="ml-4 flex-shrink-0">
        <img class="h-32 w-32 object-cover bg-white text-stone-300 border-l 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 border-t {{ $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="my-2 flex-1">
        <h4>{{ $product->name }}</h4>
        @if($product->description)
        <p class="text-xs italic text-stone-500 mt-1">{{ $product->description }}</p>
        @endif
    </div>
    <div class="mx-4 flex-shrink-0 flex items-center">
        <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