<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 h-[500px] w-[400px] 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>