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

type Props = {
    picture: string;
    title: string;
    color: string;
    price: string;
};

// props

const props = defineProps<Props>();
const { picture, price, title, color } = toRefs(props);

// methods

const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
};
</script>

<template>
    <div
        class="max-w-[500px] w-full h-[116px] flex items-center justify-between py-2 pe-6 ps-2 gap-4 bg-white rounded-150"
    >
        <div class="flex items-center gap-4">
            <div class="relative size-[100px] rounded-100 overflow-hidden border-[0.5px] border-slate-200">
                <NuxtImg
                    :src="picture"
                    :alt="title"
                    class="object-cover absolute"
                />
            </div>
            <div class="flex flex-col gap-1.5">
                <span class="typo-sub-h-md text-black">{{ title }}</span>
                <div class="flex items-center gap-2">
                    <span class="typo-p-sm text-slate-500">رنگ</span>
                    <ColorCircle
                        class="!size-5"
                        :style="{ backgroundColor: color }"
                    />
                </div>
                <span class="typo-p-md text-black">{{ price }}</span>
            </div>
        </div>
        <Button
            @click="scrollToTop"
            class="rounded-full max-sm:h-[45px]"
        >
            مشاهده
        </Button>
    </div>
</template>
