<script lang="ts" setup>
// state
const quantity = ref(1);
const maxQuantity = ref(10);

const selectedSlide = ref(0);
const slides = [
    {
        id: 0,
        picture: "/img/product-1.jpg",
    },
    {
        id: 1,
        picture: "/img/product-2.jpg",
    },
    {
        id: 2,
        picture: "/img/product-3.jpg",
    },
];
</script>

<template>
    <div class="flex gap-12 container pt-[5rem]">
        <Slider
            class="flex-1"
            v-model:selectedSlide="selectedSlide"
            :slides="slides"
        />
        <div class="flex-1 flex flex-col gap-3 mt-12">
            <span class="typo-label-sm"> سامسونگ </span>
            <h1 class="typo-h-2">موبایل Nova</h1>
            <div class="flex w-full items-center justify-between">
                <span class="typo-p-2xl"> $689.00 </span>
                <Rating />
            </div>
            <p class="typo-p-md text-slate-500 text-justify">
                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
                استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله
                در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد
                نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                کتابهای زیادی در شصت و سه درصد گذشته.
            </p>
            <div class="w-full flex flex-col gap-6 mt-4">
                <RemainQuantity
                    :maxQuantity="maxQuantity"
                    :quantity="quantity"
                />
                <div class="w-full flex gap-3 flex-col">
                    <div class="w-full flex gap-3">
                        <Button class="w-full rounded-full" end-icon="ci:plus">
                            افزودن به سبد خرید
                        </Button>
                        <QuantityCounter
                            v-model="quantity"
                            :max="maxQuantity"
                        />
                    </div>
                    <Button class="w-full rounded-full" variant="outlined">
                        همین الان بخر
                    </Button>
                </div>
                <InfoCard />
                <Share />
            </div>
        </div>
    </div>
</template>
