<template>
  <div>
    <div>
    <h1>{{ content.title }}</h1>
    <p>{{ content.body }}</p>
  </div>

    <p>Idioma actual: {{ $store.getters['langcode'] }}</p>
    <p>Ruta actual: {{ $route.params.langcode }}</p>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" @click="cambiarIdioma">
      {{ $store.getters['langcode'] === 'es' ? 'Cambiar a Català' : 'Canviar a espanyol' }}
    </button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
export default {
  data() {
    return {
      content: {},
    };
  },
  computed: {
    ...mapGetters(['langcode']),
  },
  async created() {
    const langcode = this.$route.params.langcode;
    try {
      const res = await import(`~/data/${langcode}/index.json`);
      this.content = res.default;
    } catch (err) {
      console.error('Error al cargar contenido:', err);
      this.content = {
        title: 'Contenido no disponible',
        body: 'No se pudo cargar el contenido.',
      };
    }
  },
  methods: {
    ...mapActions(['setLangcode']),
    cambiarIdioma() {
      const nuevoIdioma = this.langcode === 'es' ? 'cat' : 'es';
      this.setLangcode(nuevoIdioma);
      this.$router.push({ path: `/${nuevoIdioma}` });
    }
  }
}
</script>

<style lang="scss" scoped>

</style>