<template>
  <div class="row related_products-cards">
    <NuxtLink
      v-for="(product, key) in relatedProducts"
      :key="`related-${key}`"
      :to="`/productos/${product.id}`"
      class="col mx-2 related_product-card"
    >
      <img
        v-if="product.image"
        :src="product.image"
        alt=""
        class="related_product-image"
      />
      <img
        v-else
        class="image-default"
        src="@/assets/img/consumo-default.png"
        alt=""
      />
      <h3>{{ product.name }}</h3>
      <span v-if="product.price" class="price">{{ `${product.price}€` }}</span>
    </NuxtLink>
  </div>
</template>

<script>
export default {
  props: {
    relatedProducts: {
      type: Array,
      default: () => [],
    },
  },
}
</script>

<style lang="scss" scoped>
.related_products {
  background-color: $color-lighter-green;
  text-align: center;
  padding: 0 15px;

  img {
    margin-top: 12px;
  }

  .image-default {
    object-fit: cover;
  }

  .star {
    width: 12px;
    margin-right: 1px;
  }

  .related_product-card {
    border: 3px solid $color-grey-nav;
    border-radius: 5px;
    margin-bottom: 35px;

    .related_product-image {
      width: 100px;
      height: 100px;
      object-fit: cover;
    }

    h3 {
      font-weight: $regular;
      color: $color-navy;
      font-size: $m;
      display: inline-block;
      margin-bottom: 0;
    }

    span {
      font-weight: $regular;
      color: $color-navy;
      font-size: $m;
      display: block;
      font-weight: bolder;
      margin-bottom: 5px;
    }
  }
}
</style>
