<template>
  <div class="footer w-full z-50 flex justify-center">
    <div v-if="!isMobile" class="w-full bg-footer-color flex justify-center">
      <div
        class="md:w-bodySet flex flex-col items-center pt-20"
        :class="{ 'pb-16': $route.path === '/home' }"
      >
        <!-- <img src="@/assets/images/footer/yuanlian_logo.png" width="64" alt="yuanlian"> -->
        <ul class="flex items-center justify-center mt-16 mb-16">
          <li class="text-lg text-white px-8">{{ $t("lang.community") }}</li>
          <li class="text-sm text-white px-8">
            <a href="https://www.8btc.com/" target="_blank">{{
              $t("lang.bit")
            }}</a>
          </li>
          <li class="text-sm text-white px-8">
            <a href="https://www.reddit.com/user/yuanchain/" target="_blank"
              >Reddit</a
            >
          </li>
          <li class="text-sm text-white px-8">
            <a
              href="https://www.facebook.com/Yuan-Chain-380711552463031/"
              target="_blank"
              >Facebook</a
            >
          </li>
          <li class="text-sm text-white px-8">
            <a
              href="https://www.linkedin.com/company/yuan-chain/"
              target="_blank"
              >LinkedIn</a
            >
          </li>
          <!-- <li class="text-sm text-white px-8"><a href="https://bitcointalk.org/index.php?topic=2741373.msg28028807#msg28028807" target="_blank">Bitcointalk</a></li> -->
        </ul>
      </div>
    </div>
    <div
      v-else
      class="h-40 pl-16 pr-6 flex justify-center items-center w-full"
      :class="{
        'bg-bgfooter bg-cover bg-bgfootercolor bg-top': $route.path === '/home',
        ' bg-footer-color': $route.path !== '/home',
      }"
    >
      <!-- <div class="flex-shrink-0">
        <img
          src="@/assets/images/footer/footer-m.png"
          width="38"
          alt="yuanlian"
        />
      </div> -->
      <div class="flex flex-col ml-12">
        <div class="text-sm text-white leading-loose">
          {{ $t("lang.community") }}
        </div>
        <div class="flex flex-wrap justify-around items-center">
          <div class="text-xs text-white leading-loose flex-50%">
            <a href="https://www.8btc.com/" target="_blank">{{
              $t("lang.bit")
            }}</a>
          </div>
          <div class="text-xs text-white leading-loose flex-50%">
            <a href="https://www.reddit.com/user/yuanchain/" target="_blank"
              >Reddit</a
            >
          </div>
          <div class="text-xs text-white leading-loose flex-50%">
            <a
              href="https://www.facebook.com/Yuan-Chain-380711552463031/"
              target="_blank"
              >Facebook</a
            >
          </div>
          <div class="text-xs text-white leading-loose flex-50%">
            <a
              href="https://www.linkedin.com/company/yuan-chain/"
              target="_blank"
              >LinkedIn</a
            >
          </div>
          <!-- <div class="text-xs text-white leading-loose"><a href="https://bitcointalk.org/index.php?topic=2741373.msg28028807#msg28028807" target="_blank">Bitcointalk</a></div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { checkIsMobile } from "@/utils/utils";
import Vue from "vue";
export default Vue.extend({
  computed: {
    isMobile() {
      return checkIsMobile();
    },
  },
});
</script>
