<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import BackBtn from "./BackBtn.vue";
  import axios from 'axios'

  const codeStats = ref<string>('')
  const age = ref<string>('')

  interface ILang {
      time: string
  }

  async function getCodeStats() {
      const resp = await axios.get<ILang[]>(`${window.location.origin}/api/v1/code_stats`)
      if (resp.status !== 200) {
          codeStats.value = '❌Не удалось загрузить❌'
          return;
      }
      if (!Object.keys(resp.data).length) {
          codeStats.value = 'ничего не писал('
          return;
      }
      codeStats.value = ''
      for (let el in resp.data) {
          codeStats.value += `${resp.data[el]}на ${el} , `
      }
      codeStats.value = codeStats.value.slice(0, -2)
  }

  async function getAge() {
      const resp = await axios.get<string>(`${window.location.origin}/api/v1/age`)
      if (resp.status !== 200) return
      age.value = resp.data
  }

  onMounted(async () => {
      await getCodeStats()
      await getAge()
  })
</script>

<template>
    <BackBtn/>

    <div class="wrapper pe-none">
        <span class="main-title">Обо мне:</span>
        <p class="content">
            Семейкин Андрей, {{age}}<br>
            Живу в Москве, учусь в 1580<br>
            Пишу на C#, Python, JS. Немного знаю C++ и Java<br>
            Разбираюсь в Linux, Docker, Drone CI<br>
            За последнюю неделю: {{codeStats}}
        </p>
    </div>
</template>

<style scoped>
.main-title {
    font-weight: 800;
    font-size: 3em;
}

.content {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1.5rem;
    word-wrap: break-word;
    line-height: 1.9;
}
</style>