<script lang="ts" setup>

// types

type Props = {
    maxQuantity: number;
    quantity: number;
}

// props

defineProps<Props>();

</script>

<template>
    <div class="flex flex-col gap-2 w-full">
        <p class="typo-p-sm text-slate-500">
            سریع باش فقط
            <span class="text-black">
                {{ maxQuantity }}
            </span>
            عدد از این محصول باقی مانده
        </p>
        <div class="h-2 rounded-full relative bg-slate-200 w-full">
            <div
                :style="{ width: `${quantity * (100 / maxQuantity)}%` }"
                class="h-full absolute right-0 rounded-full bg-black transition-all ease-out"
            />
        </div>
    </div>
</template>