<template>
  <div class="content-box footer">
    <custom-footer v-if="BaseLayout" />
    <dynamic-footer v-else/>
  </div>
</template>

<script>
import store from "@components/TheFooter/storeFooter.js";

export default {
  name: 'TheFooter',
  components: {
    CustomFooter: () => import(/* webpackChunkName: "CustomFooter" */ '@components/TheFooter/CustomFooter/index.vue'),
    DynamicFooter: () => import(/* webpackChunkName: "DynamicFooter" */ '@components/TheFooter/DynamicFooter/index.vue'), 
  },
  props: {
    BaseLayout: {
      type: Boolean,
      default: true, 
    }  
  },
  data() {
    return {
      footerStyle: store.state.footerStyle,
    }
  },
  methods: {
    setStyle() {
      const styles = this.footerStyle;
      const arrayStyles = Object.values(styles);

      arrayStyles.map( item => {
        document.documentElement.style.setProperty(item.var, item.value);
      });
    }
  },
  created() {
    this.setStyle();
  }
}
</script>

<style>
  .footer {
    background: var(--footer-bg-color);
    border-top: 1px var(--footer-top-border) solid;
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-timing-function: ease-in;
  }
  @keyframes fadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  .footer a {
    color: var(--footer-link);
    word-wrap: break-word;
  }
  .footer a:hover {
    color: var(--footer-link-hover);
  }
  .footer-bottom {
    background-color: var(--bottom-footer-bg-color);
  }
  .footer-bottom span,
  .footer-bottom p,
  .footer-bottom a {
    color: var(--bottom-footer-text-color);
  }
  .footer-bottom a:hover {
    color: var(--bottom-footer-text-color-hover);
  }
  .footer-title {
    color: var(--footer-title);
  }
</style>