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

import { useImage } from "@vueuse/core";

// types

type Props = {
    image: string;
    title: string;
};

// props

const props = defineProps<Props>();

const { image } = toRefs(props);

const { isLoading: cartImageIsLoading } = useImage({
    src: image.value,
});
</script>

<template>
    <div class="flex items-center w-full gap-4">
        <div
            v-if="!cartImageIsLoading"
            class="size-[3.5rem] shrink-0 rounded-100 border border-gray-300 overflow-hidden"
        >
            <NuxtImg
                :src="image"
                alt="product"
                loading="lazy"
                fetch-priority="low"
                class="object-conver"
            />
        </div>
        <Skeleton
            v-else
            class="!size-[3.5rem] aspect-square shrink-0 !rounded-100 border border-slate-200"
        />
        <span class="text-xs font-semibold lg:text-sm text-gray-800 line-clamp-2">
            {{ title }}
        </span>
    </div>
</template>

<style scoped></style>
