<template>
	<div class="campaign">
		<a
			:href="campaign.url"
			target="_blank"
			class="campaign-link"
		>
			<img
				v-if="campaign.banner"
				:src="getBanner(campaign)"
				class="campaign-banner"
			>
		</a>
	</div>
</template>

<script setup>
const props = defineProps({
	campaign: {
		type: Object,
		default: null,
	},
});

// console.log(props.campaign?.banner);

function getBanner(campaign) {
	if (campaign.banner.entity.type === 'network' || !campaign.banner.entity.parent) {
		return `/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.${campaign.banner.type || 'jpg'}`;
	}

	if (campaign.banner.entity.type === 'channel' && campaign.banner.entity.parent?.type === 'network') {
		return `/banners/${campaign.banner.entity.parent.slug}/${campaign.banner.entity.slug}/${campaign.banner.id}.${campaign.banner.type || 'jpg'}`;
	}

	return null;
}
</script>

<style scoped>
.campaign {
	height: 100%;
	display: flex;
	justify-content: center;
}

.campaign-banner {
	max-height: 100%;
	max-width: 100%;
}
</style>
