<div class="purchase-item" [routerLink]="[purchase.id]">
  <div class="purchase-info">
    <span class="purchase-id">Compra {{ purchase.id }}.</span>
    <span class="purchase-date">Fecha de compra: {{ purchase.date }}</span>
  </div>

  @if (purchase.statusMessage) {
    <span class="purchase-status">{{ purchase.statusMessage }}</span>
  }

  <div class="purchase-action">
    <svg
      width="8"
      height="14"
      viewBox="0 0 8 14"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="arrow-icon"
    >
      <path
        d="M1 1L7 7L1 13"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </div>
</div>
