<script setup lang="ts">
// types

import { useImageColor } from "~/composables/global/useImageColor";

type Props = {
    id: number | string;
    slug: string;
    category: string;
    video?: string;
    count: number;
    description: string;
    picture: string;
    darkLayer?: boolean;
    isActive?: boolean;
};

// props

const props = defineProps<Props>();
const { id } = toRefs(props);

// state

const { colorObject } = useImageColor(`#category-image-${id.value}`);
</script>

<template>
    <NuxtLink :to="{ name: 'products-slug', params: { slug: ['category', slug] } }">
        <div class="group relative rounded-150 overflow-hidden w-full aspect-square bg-white brightness-[97%]">
            <Transition name="fade">
                <video
                    v-if="isActive"
                    :src="video"
                    autoplay
                    muted
                    loop
                    playsinline
                    webkit-playsinline
                    class="group-hover:scale-105 transition-transform duration-200 absolute object-contain size-full"
                />
                <NuxtImg
                    v-else
                    :id="`category-image-${id}`"
                    class="group-hover:scale-105 transition-transform duration-200 absolute object-contain size-full"
                    :src="picture"
                    loading="lazy"
                    fetch-priority="low"
                    alt=""
                />
            </Transition>

            <div
                v-if="darkLayer"
                class="bg-linear-to-t from-black/50 to-transparent to-40% absolute z-10 size-full"
            />

            <div class="absolute z-20 bottom-0 p-4 md:p-6 flex items-center justify-between w-full">
                <div
                    :class="colorObject?.isLight && !darkLayer ? 'text-black' : 'text-white'"
                    class="typo-sub-h-sm md:typo-sub-h-md"
                >
                    {{ category }}
                </div>

                <Icon
                    name="ci:arrow-left"
                    class="size-5 md:size-6"
                    :class="colorObject?.isLight && !darkLayer ? '**:stroke-black' : '**:stroke-white'"
                />
            </div>
        </div>
    </NuxtLink>
</template>
