<template>
  <div class="w-full md:max-w-md">
    <div class="flex flex-col items-center">
      <p class="text-xl font-medium">Kalenderlink</p>
    </div>
    <br />
    <TextCopy :copyText="generatedLink" />

    <div class="flex flex-row justify-end">
      <div class="flex flex-row gap-4 py-2">
        <button primary-outline @click="closeModal">schließen</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import { useModalStore } from "@/stores/modal";
import TextCopy from "@/components/TextCopy.vue";
import { host } from "@/serverCom";
</script>

<script lang="ts">
export default defineComponent({
  computed: {
    generatedLink() {
      return `webcal://${host || window.location.host}/api/public/calendar`;
    },
  },
  methods: {
    ...mapActions(useModalStore, ["closeModal"]),
  },
});
</script>
