<template>
  <div class="right-column">
    <img :src="currentImage" alt="Cross" />
  </div>
</template>

<script>
import { menuData } from '../../config/menuData';

export default {
  name: 'ImageContent',
  data() {
    return {
      defaultImage: '/images/homepage1.png',
      currentImage: '/images/homepage1.png'
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        this.updateImage();
      }
    }
  },
  methods: {
    updateImage() {
      const routePath = this.$route.path;
      const menuItem = this.findMenuItemByPath(menuData, routePath);
      if (menuItem && menuItem.image) {
        this.currentImage = `/images/${menuItem.image}`;
      } else {
        this.currentImage = this.defaultImage;
      }
    },
    findMenuItemByPath(menu, path) {
      for (let item of menu) {
        if (item.link === path) {
          return item;
        }
        if (item.submenu) {
          const subItem = this.findMenuItemByPath(item.submenu, path);
          if (subItem) {
            return subItem;
          }
        }
      }
      return null;
    }
  }
};
</script>

<style scoped>
.right-column {
  background-color: #d9e2f3;
}

.right-column h2 {
  text-align: center;
  color: #000;
}

.right-column img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
</style>
