<script setup lang="ts">
import { ref } from 'vue'

type StarVariant = 'pastel' | 'light' | 'header'

const props = withDefaults(defineProps<{
  count?: number
  variant?: StarVariant
}>(), {
  count: 12,
  variant: 'light',
})

const palettes: Record<StarVariant, string[]> = {
  pastel: ['#e7b13e', '#b79be8', '#f3a9cb', '#cdb6f0', '#ffb9d4'],
  light: ['rgba(255,255,255,.62)', 'rgba(255,246,251,.54)', 'rgba(255,210,122,.5)', 'rgba(201,177,255,.58)'],
  header: ['#ffd27a', '#ffb9d4', '#c9b1ff', '#fff6fb'],
}

function createStarPosition() {
  return {
    '--star-x': `${Math.round(4 + Math.random() * 92)}%`,
    '--star-y': `${Math.round(8 + Math.random() * 84)}%`,
    '--star-size': `${9 + Math.round(Math.random() * 12)}px`,
    '--star-rotate': `${Math.round(Math.random() * 80 - 40)}deg`,
  }
}

function createStarStyle(index: number) {
  const palette = palettes[props.variant]
  const alpha = props.variant === 'pastel' ? 0.85 : 0.62

  return {
    ...createStarPosition(),
    '--star-color': palette[index % palette.length],
    '--star-alpha': String(alpha),
    '--star-delay': `${(Math.random() * 8).toFixed(2)}s`,
    '--star-duration': `${(8 + Math.random() * 5).toFixed(2)}s`,
  }
}

const stars = ref(Array.from({ length: props.count }, (_, index) => {
  const symbol = index % 3 === 1 ? '✧' : '✦'

  return {
    id: index,
    symbol,
    style: createStarStyle(index),
  }
}))

function shuffleStar(index: number) {
  stars.value[index].style = {
    ...stars.value[index].style,
    ...createStarPosition(),
  }
}
</script>

<template>
  <span class="home-star-field" aria-hidden="true">
    <span
      v-for="star in stars"
      :key="star.id"
      class="home-star-field__star"
      :style="star.style"
      @animationiteration="shuffleStar(star.id)"
    >
      {{ star.symbol }}
    </span>
  </span>
</template>
