<template>
  <div class="d-flex justify-content-between product-card my-3">
    <div class="d-flex align-items-center">
      <!--img src="../../../assets/PR_1.png" alt="foto_do_produto" height="51px" -->
      <div class="ref-tag d-flex align-self-center py-2 px-3 mx-1 akkurat-bold-italic">
        {{ code}}
      </div>
      <div class="text-start">
        <div class="bressay-bold-italic product-name">{{ name }} </div>
        <div class="text-left akkurat-light min-text">
          Categoria: {{ product_category }}
          | Pag: {{page}}
          </div>
      </div>
    </div>
    <div class="d-flex product-price p-2">
      <div class=" align-self-center price-tag py-2 px-4 mx-3 akkurat-bold-italic">
        <div class="d-flex regular-price" v-if="regular_price > price">R$ {{regular_price}}</div>
        
         <div class="d-flex catalog-price">R$ {{ price }} </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'product-info-card',
  props: {
    code: {
      type: String,
      required: true,
    },
    name: {
      type: String,
      required: true,
      default: 'Nome não informado',
    },
    product_category: {
      type: String,
      required: true,
    },
    price: {
     // type: String,
      required: true,
    },
    regular_price: {
      // type: String,
      required: true,
    },
    page: {
      required: false,
    }
  },
};
</script>

<style lang="scss" scoped>
.product-card {
  border-radius: 5px;
  background: white;
  height: 59px;
  box-shadow: 0px 0px 4px #00000022;

}

.product-name{
  font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
}

.product-price {
  border-left: 1px solid #d6d6d6;
}

.price-tag {
  
  color:#278937;
  letter-spacing: 0.35px;
  font-size: 0.875rem;

  .regular-price{
    color: red;
    font-size: 0.8em;
    font-style: italic;
    text-decoration:line-through;
  }
}

.ref-tag {
  font-size: 0.8em;
  color: #5A5A5A;
  letter-spacing: 0.35px;
}

.min-text {
  font-size: 0.625rem;
}
</style>
