<div
  class="product-row-card border rounded bg-white shadow-sm d-flex justify-content-between p-3 gap-3"
>
  <!-- Left Side: Title and Description -->
  <div class="product-row-card__info d-flex flex-column justify-content-center flex-grow-1">
    <h3 class="product-row-card__title text-uppercase mb-1 m-0">
      {{ title() }}
    </h3>
    @if (description()) {
      <p class="product-row-card__description m-0 mt-1">
        {{ description() }}
      </p>
    }
  </div>

  <!-- Right Side: Actions and Pricing -->
  <div class="product-row-card__actions d-flex flex-column gap-2 justify-content-center">
    <!-- Top Row: Price and Comprar button -->
    <div class="d-flex align-items-center justify-content-end gap-3">
      <span class="product-row-card__price text-primary">
        {{ formattedPrice() }}
      </span>
      <div class="product-row-card__btn-wrapper">
        <app-button variant="primary" (click)="onBuy()"> Comprar </app-button>
      </div>
    </div>

    <!-- Bottom Row: Select, Quantity, and Agregar al carrito button -->
    <div class="d-flex align-items-center justify-content-end gap-2">
      @if (variants().length > 0) {
        <select class="form-select product-row-card__select" [(ngModel)]="selectedVariant">
          @for (variant of variants(); track variant.value) {
            <option [ngValue]="variant.value">{{ variant.label }}</option>
          }
        </select>
      }

      <app-quantity-selector [(quantity)]="quantity"></app-quantity-selector>

      <div class="product-row-card__btn-wrapper">
        <app-button variant="secondary" (click)="onAddToCart()"> Agregar al carrito </app-button>
      </div>
    </div>
  </div>
</div>
