<template>
  <div class="star-view">
    <div class="star-model">
      <Suspense>
        <LargeStarModel
          v-if="store.visiting"
          :kind="store.visiting.kind.toString().toLowerCase()"
          :color="store.visiting.core.color"
        />
      </Suspense>
    </div>
    <div v-if="store.visiting" class="star-info">
      <StarDescription :star="store.visiting" />
    </div>
  </div>
</template>

<script setup lang="ts">
import LargeStarModel from "@/components/LargeStarModel.vue";
import StarDescription from "@/components/StarDescription.vue";
import { useChartStore } from "@/state/stars";
import { useRoute } from "vue-router";

const route = useRoute();
const id: string = route.params.id.toString();

const store = useChartStore();
store.visit(parseInt(id) ?? 1);
</script>

<style scoped>
.star-view {
  height: 100%;
  display: flex;
  justify-content: center;
  gap: 1em;
  align-items: center;
}

.star-model {
  width: 100%;
  aspect-ratio: 1/1;
  flex-grow: 1;
  max-height: 100%;
}

.star-info {
  flex-grow: 2;
  width: 100%;
}

@media (max-width: 720px) {
  .star-view {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }
}
</style>
