@props([
    'name',
    'price',
    'stock' => null,
])

<button
    type="button"
    {{ $attributes->merge([
        'class' => 'flex min-h-[5.5rem] w-full flex-col justify-between rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-card)] p-3 text-left shadow-[var(--shadow-sm)] transition hover:border-[var(--color-primary)] hover:shadow-[var(--shadow-md)]',
    ]) }}
>
    <span class="line-clamp-2 text-sm font-medium text-[var(--color-text)]">{{ $name }}</span>

    <span class="mt-2 flex items-end justify-between gap-2">
        <span class="text-sm font-semibold text-[var(--color-primary)]">{{ $price }}</span>
        @if (! is_null($stock))
            <span class="text-xs text-[var(--color-text-muted)]">Stock: {{ $stock }}</span>
        @endif
    </span>
</button>