<script setup>
const props = defineProps({
  params: Object
})
</script>

<template>
  <div class="icon-container">
    <img class="marketplace-icon marketplace-icon--ebay" v-if="props.params.data.marketplaceKey === 'ebay'" src="/assets/marketplaces-short/ebay.svg">
    <img class="marketplace-icon" v-if="props.params.data.marketplaceKey === 'amazon'" src="/assets/marketplaces-short/amazon_icon.png">
    <img class="marketplace-icon" v-if="props.params.data.marketplaceKey === 'shopware6'" src="/assets/marketplaces-short/shopware.png">
    <img class="marketplace-icon" v-if="props.params.data.marketplaceKey === 'shopify'" src="/assets/marketplaces-short/shopify.png">
    <img class="marketplace-icon" v-if="props.params.data.marketplaceKey === 'shopify-new'" src="/assets/marketplaces-short/shopify.png">
    <img class="marketplace-icon" v-if="props.params.data.marketplaceKey === 'telefon' || !props.params.data.marketplaceKey" src="/assets/marketplaces-short/hand.svg">
    <img class="marketplace-icon" v-if="props.params.data.marketplaceKey === 'xentral'" src="/assets/marketplaces-short/xentral_logo.png">
    <img class="marketplace-icon" v-if="props.params.data.marketplaceKey === 'plentyone'" src="/assets/marketplaces-short/plentyone_logo.png">
    <img class="marketplace-icon" v-if="props.params.data.marketplaceKey === 'jtl-ffn'" src="/assets/marketplaces-short/jtl.png">
    <img class="marketplace-icon" v-if="props.params.data.marketplaceKey === 'temu'" src="/assets/marketplaces-short/temu.png">
    <UIcon name="i-mdi-file-delimited" class="marketplace-icon marketplace-icon--ui" v-if="props.params.data.marketplaceKey === 'CSV'" />
    <UIcon name="i-mdi-pencil" class="marketplace-icon marketplace-icon--ui" v-if="props.params.data.marketplaceKey === 'manual'" />
  </div>
</template>

<style>
.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 4px;
}

.marketplace-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.marketplace-icon--ebay {
  width: 44px;
  height: 20px;
}

.marketplace-icon--ui {
  width: 20px;
  height: 20px;
  font-size: 20px;
}
</style>