<template>
  <section class="partners carousel inline-block">
    <div class="carousel__box pl-4 infinite-scroll flex justify-around gap-48 w-full overflow-hidden">
      <div v-for="(item, index) in icons" :key="index" class="item w-160 h-80 flex items-ar grayscale contrast-0 transition-all hover:filter-none">
        <img
          :src="item"
          height="80"
          width="160"
          class="object-contain w-full h-full"
          alt="carousel-item" />
      </div>
      <div v-for="(item, index) in icons" :key="index" class="item w-160 h-80 flex items-center grayscale contrast-0 transition-all hover:filter-none">
        <img
          :src="item"
          height="80"
          width="160"
          class="object-contain w-full h-full"
          alt="carousel-item" />
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import Container from '@/components/ui/Container.vue';
import ordway from '@/assets/img/partners/ordway.png';
import berkeley from '@/assets/img/partners/berkeley.svg?url';
import moleStreet from '@/assets/img/partners/mole-street.svg?url';
import bornBred from '@/assets/img/partners/born-bred.svg?url';
import bob from '@/assets/img/partners/bob.png';
import digitalKnights from '@/assets/img/partners/digital-knights.svg?url';
import ebanx from '@/assets/img/partners/ebanx.svg?url';
import cemtrex from '@/assets/img/partners/cemtrex.svg?url';
import citrusAd from '@/assets/img/partners/citrus-ad.svg?url';
import citcoin from '@/assets/img/partners/citcoin.png';

export default defineComponent({
  components: { Container },

  props: {
    icons: {
      type: Array as PropType<string[]>,
      default: () => [
        ordway,
        berkeley,
        moleStreet,
        bornBred,
        bob,
        digitalKnights,
        ebanx,
        cemtrex,
        citrusAd,
        citcoin,
      ],
    },
  },
});
</script>
