<script setup lang="ts">
import type { VNodeRef } from "vue";
import tinycolor from "tinycolor2"

const imageElement = shallowRef<VNodeRef | null>(null);

const palette = useVibrantPalette(imageElement);
const paletteVibrantHsl = ref<string>('');

watch(palette, () => {
    if (!palette.value?.Vibrant) return;
    const [hue, saturation, lightness] = palette.value.Vibrant.hsl;
    const lighterColor = tinycolor({ h: hue * 360, s: saturation, l: lightness }).brighten().desaturate().toHslString()
    paletteVibrantHsl.value = lighterColor;
});

interface Props {
    image_url: string;
    image_alt?: string;
    title: string;
    type: 'anime' | 'manga' | 'character' | 'voice_actor';

    subtitle?: string;
    description?: string;

    tooltipEnabled?: boolean;
    tooltipMetadata?: {
        studio: string;
        type: string;
        episodes: number;
        rating: number;

        tags?: string[];
    };

    dynamicColor?: boolean;

    onClick?: () => void;
    onHover?: (isHovering: boolean) => void;
}

const props = defineProps<Props>();
</script>

<template>
    <div class="rounded-lg h-full overflow-hidden max-w-64">
        <div class="flex flex-col gap-2 cursor-pointer text-muted-foreground vibrant-color">
            <NuxtImg ref="imageElement" :src="props.image_url" sizes="128px md:256px" quality="100" />
            <p class="text-lg line-clamp-2 font-semibold">
                {{ props.title }}
            </p>
        </div>
    </div>
</template>

<style scoped>
.vibrant-color:hover {
    color: v-bind(paletteVibrantHsl);
}

.vibrant-color {
    transition: color ease-in 0.1s;
}
</style>
