<template>
  <main v-if="consumoComponents" class="min-h-screen relative mx-8">
    <template v-for="(component, index) in consumoComponents" :key="`consumo-component-${component.component}-${index}`">
      <component 
        :is="component.component" 
        v-if="component" 
        v-bind="component.props" />
    </template>
  </main>
</template>

<script>
import HeroPages from '~/components/HeroPages.vue';
import TextWithImage from '../../components/TextWithImage.vue';

export default {
  components: {
    HeroPages,
    TextWithImage
  },
  data() {
    return {
      consumoComponents: []
    };
  },
  async created() {
    const langcode = this.$route.params.langcode;
    try {
      const res = await import(`~/data/${langcode}/consumo-cuidado.json`);
      this.consumoComponents = res.default;
    } catch (err) {
      console.error('Error al cargar contenido:', err);
      this.consumoComponents = [
        {
          component: 'ErrorComponent',
          props: {
            message: 'Contenido no disponible',
          },
        },
      ];
    }
  }
}
</script>