<script setup>
import { useId } from 'vue';

defineProps({
	photo: {
		type: Object,
		default: null,
	},
	favicon: {
		type: Boolean,
		default: false,
	},
});

const entityTooltipId = useId();
</script>

<template>
	<a
		v-if="photo?.entity"
		v-tooltip="{ content: photo.entity.name, ariaId: entityTooltipId }"
		:to="`/${photo.entity.type}/${photo.entity.slug}`"
	>
		<img
			v-if="favicon && photo.entity.type !== 'network' && !photo.entity.independent && photo.entity.parent"
			:src="`/logos/${photo.entity.parent.slug}/favicon.png`"
			class="album-logo favicon"
		>

		<img
			v-else-if="favicon"
			:src="`/logos/${photo.entity.slug}/favicon.png`"
			class="album-logo favicon"
		>

		<img
			v-else-if="photo.entity.type !== 'network' && !photo.entity.independent && photo.entity.parent"
			:src="`/logos/${photo.entity.parent.slug}/${photo.entity.slug}.png`"
			class="album-logo"
		>

		<img
			v-else
			:src="`/logos/${photo.entity.slug}/network.png`"
			class="album-logo"
		>
	</a>
</template>

<style scoped>
.album-logo {
	max-height: .75rem;
	max-width: 5rem;
	position: absolute;
	right: 0;
	bottom: 0;
	padding: .5rem;
	transition: transform .25s ease, opacity .25s ease;
	filter: drop-shadow(0 0 2px var(--shadow-weak));
}

@media(--small) {
	.album-logo:not(.favicon) {
		max-height: .5rem;
		max-width: 3.5rem;
	}
}
</style>
