<script lang="ts" setup>

// types

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

// props

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

</script>

<template>
    <div class="max-w-[500px] w-full h-[116px] flex items-center justify-between py-2 pe-6 ps-2 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">
                <img :src="picture" :alt="title" class="object-cover absolute" />
            </div>
            <div class="flex flex-col gap-1">
                <span class="typo-sub-h-md text-black">{{ title }}</span>
                <span class="typo-p-sm text-slate-500">{{ color }}</span>
                <span class="typo-p-md text-black">{{ price }}</span>
            </div>
        </div>
        <Button class="rounded-full">
            افزودن به سبد
        </Button>
    </div>
</template>