<script lang="ts">
import {defineComponent, SetupContext, ref, Ref} from 'vue';
import GetLocalizedText from "../classes/language";

export default defineComponent({
    emits: ['close'],
    name: 'cookiePrompt',
    setup(_, { emit }: SetupContext) {

        function acceptCookies(){
            emit("close")                
            localStorage.setItem("allow-data-storage", "true")
        }

        function rejectCookies(){
            emit("close")
            localStorage.setItem("allow-data-storage", "false")
        }

        return { 
            acceptCookies, rejectCookies
        };
    },
});
</script>

<template>
    <div style="display: flexbox; width: 100%;">
        <div class="hero bg-base-200 cardBody">
            <div class="hero-content flex-col lg:flex-row">
                <img src="/cookie.svg"  class="max-w-sm rounded-lg shadow-2xl" />
                <div>
                    <h1 class="text-5xl font-bold">Diese Seite nutzt Cookies</h1>
                    <p class="py-6">
                        Um richtig zu arbeiten verwendet diese Seite cookies.
                        <br>
                        <br>
                        Ein cookie welcher die entscheidung speichert wird immer gesetzt
                    </p>
                    <div class="divider"></div>
                    <button class="btn btn-success" v-on:click="acceptCookies">Cookies zulassen</button>
                    <button class="btn btn-error" style="margin-left: 15px;" v-on:click="rejectCookies">Cookies verbieten</button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .cardBody {
        align-items: center;
        justify-content: center;
        width: fit-content;
    }
</style>