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

type Props = {
    isShow: boolean;
};

type Emits = {
    update: [value: any];
    "update:isShow": [value: boolean];
};

// props

const props = defineProps<Props>();

const { isShow } = toRefs(props);

// emits

const emit = defineEmits<Emits>();

// computed

const visible = computed({
    get: () => isShow.value ?? false,
    set: (value: boolean) => emit("update:isShow", value),
});
</script>

<template>
    <Modal
        v-model="visible"
        title="ورژن جدید"
        contectClass="!w-[90vw] lg:!w-[35vw]"
        @close="visible = false"
    >
        <template #content>
            <div class="w-full flex flex-col text-start gap-3 py-5" dir="rtl">
                <p>
                    نسخه جدید و بهبود یافته اپلیکیشن با ویژگی‌های جذاب منتظر
                    شماست
                </p>
                <p>برای تجربه بهتر، لطفا نسخه فعلی را بروزرسانی کنید</p>
                <p>
                    پس از کلیک بر روی گزینه دریافت نسخه جدید، برنامه به صورت
                    خودکار بروز می‌شود
                </p>
            </div>

            <div class="py-6 border-t border-slate-200 flex gap-3">
                <Button
                    @click="emit('update', null)"
                    class="rounded-full px-10"
                >
                    <span>دریافت ورژن جدید</span>
                </Button>
                <DialogClose aria-label="Close">
                    <Button variant="outlined" class="rounded-full px-10">
                        انصراف
                    </Button>
                </DialogClose>
            </div>
        </template>
    </Modal>
</template>

<style scoped></style>
