<template>
  <SfSection
    :title-heading="title"
    class="section"
  >
    <SfLoader
      :class="{ loading }"
      :loading="loading"
    >
      <SfCarousel
        data-cy="related-products-carousel"
        :settings="{ peek: 16, breakpoints: { 1023: { peek: 0, perView: 2 } } }"
        class="carousel"
      >
        <SfCarouselItem
          v-for="(product, i) in products"
          :key="i"
          class="carousel__item"
        >
          <SfProductCard
            :title="productGetters.getName(product)"
            :image="productGetters.getCoverImage(product)"
            :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
            :special-price="productGetters.getPrice(product).special && $n(productGetters.getPrice(product).special, 'currency')"
            :link="localePath(`/p/${productGetters.getId(product)}/${productGetters.getSlug(product)}`)"
          />
        </SfCarouselItem>
      </SfCarousel>
    </SfLoader>
  </SfSection>
</template>

<script>

import { SfCarousel, SfLoader, SfProductCard, SfSection } from '@borngroup/lightswitch-storefront-ui-vue';
import { productGetters } from '@borngroup/lightswitch-shopify';

export default {
    name: 'RelatedProducts',
    components: {
        SfCarousel,
        SfProductCard,
        SfSection,
        SfLoader
    },
    props: {
        title: {
          default: '',
          type: String,
        },
        products: {
          default: [] || {},
          type: Array || Object
        },
        loading: Boolean
    },
    setup() {
        return { productGetters };
    }
};
</script>

<style lang="scss" scoped>
@import '@borngroup/lightswitch-storefront-ui-vue/styles.scss';
.section {
  margin-top: var(--spacer-base);
}

.carousel {
    margin: 0 calc(var(--spacer-sm) * -1) 0 0;
  @include for-desktop {
    margin: 0;
  }
  &__item {
    margin: 1.9375rem 0 2.4375rem 0;
  }
}

</style>
