<script setup>
import { useMainStore } from "@/stores/store";
import Footer from "../components/Footer.vue";

const store = useMainStore();
// const apiUrl = import.meta.env.VITE_API_URL;
// const imgUrl = import.meta.env.VITE_API_IMG_URL;

const shareData = {
  title: "101 AI明信片",
  text: "",
  url: store.imgPath,
};

let resultMessage = "";

const share = async () => {
  try {
    await navigator.share(shareData);
    resultMessage = "MDN shared successfully";
  } catch (err) {
    resultMessage = `Error: ${err}`;
  }
};
</script>

<template>
  <div class="content main-bg">
    <v-container class="px-5 px-sm-15 d-flex flex-column align-center">
      <img class="w-100 mb-15" :src="store.imgPath" alt="" />

      <!-- <p class="text-start mt-5 px-5">
        位在南部橫貫公路、向陽北方，直線約7公里的高山湖泊嘉明湖，是一座被譽為「高山藍寶石」、「天使的眼淚」的橢圓形湖泊。由翠綠的森林植被所環繞，清澈的湖面映照著天空的湛藍，深不可測，彷若人間仙境般的靜謐。傳說中嘉明湖的形成，是因隕石撞擊地球表面後造成的隕石坑，相當罕見。
      </p> -->

      <button @click="share()" class="main-btn mt-15">分享相片</button>
    </v-container>
    <Footer url="/step3" />
  </div>
</template>

<style lang="scss" scoped>
.content {
  padding: 11rem 0 8rem;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  p {
    color: #b3b3b4;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  }
}
</style>
