<template>
  <component :is="comp" v-if="comp" />
</template>

<script setup>
import { ref, watch, onMounted, markRaw } from 'vue'
import { toRef } from 'vue'

const icons = import.meta.glob('./*.vue')

const props = defineProps({
  weather: String
})

const weather = toRef(props, 'weather')
const comp = ref(null)

const loadComponent = async () => {
  if (weather.value) {
    const path = `./${weather.value}.vue`
    const loader = icons[path]

    if (loader) {
      const mod = await loader()
      comp.value = markRaw(mod.default)
    } else {
      console.warn(`No icon component found for weather: "${weather.value}"`)
      comp.value = null
    }
  }
}

onMounted(loadComponent)
watch(weather, loadComponent)
</script>

<style lang="scss">
@use './style.scss' as *;
</style>
