<template>
  <section class="flex h-screen snap-center items-center justify-center">
    <div
      class="my-40 mx-5 flex w-full max-w-3xl flex-col text-primary-500"
      v-animate="{ stagger: true, preset: 'slide-left', duration: 500 }"
    >
      <h2 class="mb-10 text-center text-3xl font-bold">
        {{ t("skills.skills") }}
      </h2>
      <h2 class="text-lg font-bold">Arduino</h2>
      <div class="mb-5 grid grid-cols-5 items-center gap-x-4">
        <div
          class="col-span-5 h-4 w-full rounded-full bg-dark-600 sm:col-span-4"
        >
          <div class="h-4 w-3/5 rounded-full bg-primary-100" />
        </div>
        <h2 class="hidden text-lg font-bold sm:inline-block">
          {{ t("skills.intermediate") }}
        </h2>
      </div>
      <h2 class="text-lg font-bold">Docker</h2>
      <div class="mb-5 grid grid-cols-5 items-center gap-x-4">
        <div
          class="col-span-5 h-4 w-full rounded-full bg-dark-600 sm:col-span-4"
        >
          <div class="h-4 w-4/5 rounded-full bg-primary-100" />
        </div>
        <h2 class="hidden text-lg font-bold sm:inline-block">
          {{ t("skills.advanced") }}
        </h2>
      </div>
      <h2 class="text-lg font-bold">Javascript</h2>
      <div class="mb-5 grid grid-cols-5 items-center gap-x-4">
        <div
          class="col-span-5 h-4 w-full rounded-full bg-dark-600 sm:col-span-4"
        >
          <div class="h-4 w-2/3 rounded-full bg-primary-100" />
        </div>
        <h2 class="hidden text-lg font-bold sm:inline-block">
          {{ t("skills.intermediate") }}
        </h2>
      </div>
      <h2 class="text-lg font-bold">Linux</h2>
      <div class="mb-5 grid grid-cols-5 items-center gap-x-4">
        <div
          class="col-span-5 h-4 w-full rounded-full bg-dark-600 sm:col-span-4"
        >
          <div class="h-4 w-4/5 rounded-full bg-primary-100" />
        </div>
        <h2 class="hidden text-lg font-bold sm:inline-block">
          {{ t("skills.advanced") }}
        </h2>
      </div>
      <h2 class="text-lg font-bold">Nuxt</h2>
      <div class="mb-5 grid grid-cols-5 items-center gap-x-4">
        <div
          class="col-span-5 h-4 w-full rounded-full bg-dark-600 sm:col-span-4"
        >
          <div class="h-4 w-3/5 rounded-full bg-primary-100" />
        </div>
        <h2 class="hidden text-lg font-bold sm:inline-block">
          {{ t("skills.intermediate") }}
        </h2>
      </div>
    </div>
  </section>
</template>

<script setup>
const { t } = useI18n({ useScope: "local" });
</script>

<i18n lang="yaml">
en:
  skills:
    skills: "Skills"
    intermediate: "Intermediate"
    advanced: "Advanced"

nl:
  skills:
    skills: "Vaardigheden"
    intermediate: "Gemiddeld"
    advanced: "Geavanceerd"
</i18n>
