<template>
  <section class="promo-scroll-wrapper q-mx-md q-mb-md">
    <div class="promo-scroll">
      <div
        v-for="card in cards"
        :key="card.id"
        class="promo-card"
        :class="{ 'cursor-pointer': card.route }"
        @click="card.route && router.push({ name: card.route })"
      >
        <img :src="card.image" :alt="card.alt" class="promo-card__img" />
      </div>
    </div>
  </section>
</template>

<script setup>
import { useRouter } from 'vue-router';
import Banner1 from 'src/assets/banner_1.svg';
import Banner2 from 'src/assets/banner_2.svg';

const router = useRouter();

const cards = [
  { id: 1, image: Banner1, alt: 'Diária sob medida', route: 'SobMedidaPage' },
  { id: 2, image: Banner2, alt: 'Escolha profissionais', route: 'SearchPage' },
];
</script>

<style scoped lang="scss">
.promo-scroll-wrapper {
  overflow: hidden;
}

.promo-scroll {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;

  &::-webkit-scrollbar {
    display: none;
  }

  &::after {
    content: '';
    flex: 0 0 1px;
  }
}

.promo-card {
  flex: 0 0 calc(100% - 44px);
  min-width: 0;
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
  background: #e8e4f5;
}

.promo-card__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
</style>
