<template>
    <van-dialog v-model:show="show" id="terms-modal" class="terms-modal">
        <template #title>
            <!-- Modal header -->
            <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600 max-w-2xl max-h-full">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                    Registration Agreement
                </h3>
                <button type="button" @click="hideTerms"
                    class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">
                    <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
        </template>
        <template #default>
            <!-- Modal content -->
            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 max-w-xl overflow-scroll h-[60vh]">
                <!-- Modal body -->
                <div class="p-6 space-y-6 text-base leading-relaxed text-gray-500 dark:text-gray-400 ">
                    <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                        Once registered, the user becomes a legitimate user of {{appName}}. Users are solely responsible for the
                        security of their user names and passwords. In addition, each user is solely responsible for all
                        activities and events that occur under his or her user name. Users shall immediately notify  {{appName}}
                        of any unauthorized use of their user account or any breach of security.
                    </p>
                    <p class="">
                        If a Supporter provides  {{appName}} with information that is inaccurate, untrue, or contains illegal or
                        undesirable information,  {{appName}} reserves the right not to improve it and to terminate the
                        Supporter's access to the Platform Services. If a supporter fraudulently obtains an account ID with
                        false information, or if there is illegal or undesirable information in the account avatar, profile,
                        or other registration information,  {{appName}} has the right to take measures such as notifying the
                        deadline for correction, suspending the use, or canceling the registration. If an account name is
                        registered under a false affiliated organization or social celebrity,  {{appName}} has the right to
                        cancel the account and report it to government authorities.
                    </p>
                </div>
                <!-- Modal footer -->

            </div>
        </template>
        <template #footer>
            <div
                class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600 max-w-2xl max-h-full">
                <button type="button" @click="acceptTerms"
                    class="text-white bg-[#F96825] hover:bg-[#F96825] focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I
                    accept</button>
                <button type="button" @click="decline"
                    class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Decline</button>
            </div>
        </template>
    </van-dialog>
</template>

<script setup lang="ts" name="TermsModal">
import { ref } from 'vue';

const appName =  ref(import.meta.env.VITE_APP_NAME)

const show = ref(false)

const showTerms = () => {
    show.value = true
}

const hideTerms = () => {
    show.value = false
}

defineExpose({
    showTerms,
    hideTerms
})

const emits = defineEmits(['accept', 'decline'])

const acceptTerms = () => {
    emits('accept')
    hideTerms()
}

const decline = () => {
    emits('decline')
    hideTerms()

}

</script>


<style>
.terms-modal {
    --van-dialog-width: 420px;
}
</style>