<template>
  <NuxtLayout name="ui">
    <h1 class="px-10 py-10">TEST CASE - Welkom to the page!</h1>
    <div class="relative px-10 py-10 flex items-center justify-center">
      <div class="flex flex-col gap-4">
        <button
          @click="helloWorld"
          class="bg-red-300 rounded-md px-2 hover:bg-slate-300"
        >
          Click me!
        </button>
        <div class="bg-slate-600 rounded-md text-md text-white px-2">
          {{ sync }}
        </div>
      </div>
    </div>
  </NuxtLayout>
</template>

<script setup lang="ts">
const sync: Ref<string> = ref("");

function reset() {
  sync.value = "";
}

async function helloWorld() {
  reset();
  const res = await useAxios(`/hello_world`, {
    method: "GET",
  });
  sync.value = res.data;
}
</script>
