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

import Tag from "~/components/ui/Tag.vue";
import Rate from "~/components/ui/Rate.vue";
import ColorCircle from "~/components/ui/ColorCircle.vue";

// types

type Props = {
    brand: string;
    title: string;
    colors: string[];
    price: number;
    picture: string;
    tag?: string;
    rate?: number;
};

// props

defineProps<Props>();
</script>

<template>
    <div
        class="relative size-full min-h-[31.25rem] rounded-2xl bg-black/10 overflow-hidden p-6"
    >
        <img
            src="~/assets/img/product-2.jpg"
            class="size-full object-cover absolute inset-0"
            alt="product-background"
        />
        <div
            class="flex justify-between items-center absolute px-6 pt-6 top-0 w-full inset-x-0"
        >
            <Rate v-if="rate">
                {{ rate }}
            </Rate>
            <Tag v-if="tag">
                {{ tag }}
            </Tag>
        </div>
        <div
            class="absolute inset-x-0 bottom-0 pb-6 px-6 flex justify-between items-center"
        >
            <span class="typo-p-md"> ${{ price }} </span>
            <div class="flex flex-col gap-2 items-end">
                <span class="typo-p-md">
                    {{ brand }}
                </span>
                <span class="typo-sub-h-md">
                    {{ title }}
                </span>
                <div class="flex items-center gap-2 mt-1">
                    <ColorCircle
                        v-for="color in colors"
                        :key="color"
                        :style="{ backgroundColor: color }"
                    />
                </div>
            </div>
        </div>
    </div>
</template>
