<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { generatePosterFrame } from '../game/sprites/poster'
import { ANIMATIONS } from '../game/sprites'

const props = defineProps<{
  seed: string
  archetype?: string
  tier?: number
  size?: number
  pose?: keyof typeof ANIMATIONS
  glowColor?: 'cyan' | 'pink' | 'purple' | 'yellow'
}>()

const imgSrc = ref('')

async function generate() {
  // Always render at high resolution (480px) for quality, display size is controlled by CSS
  imgSrc.value = await generatePosterFrame(
    props.seed,
    props.tier || 0,
    props.archetype,
    props.pose || 'attack',
    480,
    undefined,
    props.glowColor || 'cyan',
  )
}

onMounted(() => generate())

watch(() => [props.seed, props.archetype, props.tier, props.pose, props.glowColor], () => generate())
</script>

<template>
  <img
    v-if="imgSrc"
    :src="imgSrc"
    alt=""
    class="poster-sprite-img"
    :style="{ width: `${size || 400}px`, height: `${size || 400}px` }"
  />
</template>

<style scoped>
.poster-sprite-img {
  image-rendering: pixelated;
  display: block;
}
</style>
