<script setup lang="ts">
import { computed, type Component } from 'vue'
import type { NepalArtStyle } from '../../api/client'
import ArgueAnimeScene from './ArgueAnimeScene.vue'
import BlueAnimeScene from './BlueAnimeScene.vue'
import DawnAnimeScene from './DawnAnimeScene.vue'
import GoldAnimeScene from './GoldAnimeScene.vue'
import HomeAnimeScene from './HomeAnimeScene.vue'
import IkeaAnimeScene from './IkeaAnimeScene.vue'
import LotusAnimeScene from './LotusAnimeScene.vue'
import MintAnimeScene from './MintAnimeScene.vue'
import NightAnimeScene from './NightAnimeScene.vue'
import PaperAnimeScene from './PaperAnimeScene.vue'
import RoseAnimeScene from './RoseAnimeScene.vue'

const props = defineProps<{
  styleKey: NepalArtStyle
}>()

const SCENES: Record<string, Component> = {
  indigo_ikea: IkeaAnimeScene,
  dawn_meet: DawnAnimeScene,
  blush_argue: ArgueAnimeScene,
  mint_reconcile: MintAnimeScene,
  saffron_home: HomeAnimeScene,
  mandala_blue: BlueAnimeScene,
  spiral_cyan: BlueAnimeScene,
  ocean_prayer: BlueAnimeScene,
  night_star: NightAnimeScene,
  lokta_gold: GoldAnimeScene,
  terra_torn: GoldAnimeScene,
  mandala_pink: RoseAnimeScene,
  spiral_rose: RoseAnimeScene,
  lotus_petal: LotusAnimeScene,
  desert_rose: RoseAnimeScene,
}

const Scene = computed(() => SCENES[props.styleKey] ?? PaperAnimeScene)
</script>

<template>
  <component :is="Scene" />
</template>
