<template>
  <div>
    <HeaderComponent
      current-page="blogs"
      :transparent="scroll < 50"
      :with-shadow="scroll > 50"
      @onButtonClick="scrollToContacts"
    ></HeaderComponent>
    <div class="overflow-hidden relative mt-[-80px] pt-20">
      <div
        class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[380px] h-[380px] z-0 -right-[82px] -top-[51px]"
      ></div>

      <section class="relative z-10 px-[6.7%] mt-6">
        <router-link
          to="/blogs"
          class="text-dark hover:text-gray-600 flex items-center leading-6 text-lg font-light"
        >
          <LeftArrow class="inline w-6 h-6 mr-1"></LeftArrow>
          Back to all articles
        </router-link>

        <h1 class="text-dark text-5xl mt-11 leading-[3.32.rem]">
          {{ blog.title }}
        </h1>
        <p class="mt-5 leading-5 text-gray-400">
          <small>{{ blog.date }}</small>
        </p>

        <img :src="blog.image" alt="Title image" class="w-full mt-5" />
        <p
          class="mt-6 text-gray-600 text-xl leading-7"
          v-html="blog.content"
        ></p>
      </section>
      <div
        class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[238px] h-[238px] z-0 -left-[91px] top-[50%]"
      ></div>
      <FooterComponent class="mt-[92px]"></FooterComponent>
    </div>
  </div>
</template>

<script>
import HeaderComponent from "../components/HeaderComponent.vue";
import LeftArrow from "../components/svg/LeftArrow.vue";
import BlogsMixin from "../components/mixins/BlogsMixin.vue";
import FooterComponent from "../components/FooterComponent.vue";

export default {
  name: "BlogsPage",
  data() {
    return {
      scroll: window.scrollY,
      blog: {},
    };
  },
  mounted() {
    window.addEventListener("scroll", this.onScroll);

    if (!this.$route.params.id || !this.blogs[this.$route.params.id - 1]) {
      this.$router.push("/blogs");
      return;
    }

    this.blog = this.blogs[this.$route.params.id - 1];
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.onScroll);
  },
  methods: {
    onScroll() {
      this.scroll = window.scrollY;
    },
    scrollToContacts(){
      this.$refs.contacts.$el.scrollIntoView({ behavior: 'smooth' });
    }
  },
  components: { HeaderComponent, FooterComponent, LeftArrow },
  mixins: [BlogsMixin],
};
</script>