<template>
  <router-link
    :to="'/visit/' + star.core.id"
    class="star"
    :style="{
      left: `${star.position.bottom}%`,
      top: `${star.position.right}%`,
      width: `${star.position.width}px`,
      filter: `drop-shadow(0 0 5px ${
        star.core.color
      }) drop-shadow(0 0 10px white) sepia(1) hue-rotate(${hue - 38}deg)`,
    }"
  >
    <div class="star-color">
      <img :src="image" />
    </div>
  </router-link>
</template>

<script setup lang="ts">
import { computed, PropType } from "vue";
import { Star } from "@/swagger";
import { getHue } from "@/scripts/convert_color";

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

const image = computed(() => {
  var src = props.star.kind.toString().toLowerCase();
  return `/images/${src}.webp`;
});

const hue = computed(() => {
  return getHue(props.star.core.color);
});
</script>

<style scoped lang="scss">
.star {
  position: absolute;
}

img {
  width: 100%;
  aspect-ratio: 1/1;
}

.star-color {
  border-radius: 9999999px;
  aspect-ratio: 1/1;
  opacity: 0.8;
}
</style>
