<template>
  <section class="promo-scroll-wrapper q-ma-md">
    <div class="promo-scroll">
      <div
        v-for="card in cards"
        :key="card.id"
        class="promo-card"
        @click="goToCard(card)"
      >
        <img
          :alt="card.alt"
          :src="card.image"
          class="promo-card__img"
        />
      </div>
    </div>
  </section>
</template>

<script setup>
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";

import Banner1 from "src/assets/banner_1.svg";
import Banner2 from "src/assets/banner_2.svg";
import ProfileHelpDialog from "src/components/profile/ProfileHelpDialog.vue";

const $q = useQuasar();
const router = useRouter();

const cards = [
  {
    alt: "Diária sob medida",
    id: 1,
    image: Banner1,
    routeName: "OpportunitiesPage",
  },
  {
    action: "help",
    alt: "Como aceitar uma diária",
    id: 2,
    image: Banner2,
  },
];

const goToCard = (card) => {
  if (card.action === "help") {
    $q.dialog({ component: ProfileHelpDialog });

    return;
  }

  if (card.routeName) {
    router.push({ name: card.routeName });
  }
};
</script>

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

.promo-scroll {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.promo-card {
  background: #e8e4f5;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
}

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