<template>
  <div class="reviews relative overflow-hidden bg-white rounded-32 mobile:rounded-24 cursor-default">
    <ImageWebpWrapper
      :image-default="bgImage.png"
      :image-webp="bgImage.webp"
      class="bg-image absolute left-0 right-0 top-0 bottom-0 tablet:hidden"
      height="385"
      width="624"
      :lazy-load-enable="false" />
    <div
      class="platforms flex flex-col gap-24 p-48 tablet:gap-y-64 mobile:p-32 mobile:gap-y-24">
      <div v-for="(platform, platformName) in platforms" :key="platformName" class="cursor-pointer hover:text-orange-500">
        <a
          :href="platform.url"
          class="platform flex relative gap-24 items-center"
          rel="noopener nofollow"
          target="_blank">
          <div class="logo w-80 h-80 mobile:w-64 mobile:h-64">
            <img :src="logos[platformName]" height="80" width="80" loading="lazy" alt="logo" />
          </div>
          <div>
            <div class="score mb-4 text-gray-1200 font-regular text-18">
              <b class="font-semi-bold capitalize">{{ platformName }} /</b>
              {{ platform.rating }} score
            </div>
            <div class="count text-gray-500 font-regular text-16">
              {{ platform.count }} reviews
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useReviewPlatformsStore } from '@/store/reviewPlatforms';
import { IReviewPlatforms } from '@/database/review-platforms/reviewPlatforms.types';
import bgWebp from '@/assets/img/pages/index/review-platform.webp';
import bgPng from '@/assets/img/pages/index/review-platform.png';
import g2Icon from '@/assets/img/static-icons/company/g2-transparent.svg?url';
import clutchIcon from '@/assets/img/static-icons/company/clutch-transparent.svg?url';
import upcityIcon from '@/assets/img/static-icons/company/upcity.svg?url';

import ImageWebpWrapper from '@/components/ui/ImageWebpWrapper.vue';

export default defineComponent({
  components: {
    ImageWebpWrapper,
  },

  async setup() {
    const store = useReviewPlatformsStore();
    await store.getReviewPlatforms();
    return { platforms: store.reviewPlatforms };
  },

  data: () => ({
    bgImage: {
      png: bgPng,
      webp: bgWebp,
    },
  }),

  computed: {
    logos(): Record<IReviewPlatforms.PlatformName, string> {
      return {
        g2: g2Icon,
        clutch: clutchIcon,
        upcity: upcityIcon,
      };
    },
  },
});
</script>
