<template>
  <div class="description">
    <nav>
      <a v-if="star.core.id >= 1" :href="`/visit/${star.core.id - 1}`"
        >previous</a
      >
      <button @click="copy">
        <span v-if="!copied">share</span><span v-else>link copied</span>
      </button>
      <a
        v-if="star.core.id <= store.stars.length"
        :href="`/visit/${star.core.id + 1}`"
        >next</a
      >
    </nav>
    <h1>{{ star.name }}</h1>
    <p>{{ star.description }}</p>
  </div>
</template>

<script setup lang="ts">
import { PropType, ref } from "vue";
import { Star } from "@/swagger";
import { useChartStore } from "@/state/stars";

defineProps({
  star: { type: Object as PropType<Star>, required: true },
});

const store = useChartStore();

const copied = ref(false);

const copy = async () => {
  await navigator.clipboard.writeText(window.location.href);
  copied.value = true;
};

store.fetchChart();
</script>

<style scoped>
.description {
  padding: 1em;
}

button,
a {
  background: none;
  border-style: none;
  color: #aaf0d1;
  cursor: pointer;
  text-decoration: none;
  font-size: medium;
}

nav {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

h1,
p {
  color: #f0d1aa;
}
</style>
