<script setup lang="ts">
import { ref } from 'vue'

const name = ref('Unknown')

const getName = async () => {
  const res = await fetch('/api/')
  const data = await res.json()
  name.value = data.name
}
</script>

<template>
  <div class="app-container bg-slate-50 min-h-screen">
    <div class="container mx-auto px-6 py-8">
      <h1 class="text-4xl font-extrabold text-emerald-600 mb-6 text-center">You did it!</h1>
      <div class="bg-white rounded-lg shadow-lg p-8 mb-8">
        <p class="text-lg text-gray-700 mb-6 text-center">
          Visit
          <a
            href="https://vuejs.org/"
            target="_blank"
            rel="noopener"
            class="text-emerald-500 hover:text-emerald-700 underline font-semibold"
          >
            vuejs.org
          </a>
          to read the documentation
        </p>
        <div class="flex justify-center">
          <button
            class="bg-emerald-500 hover:bg-emerald-600 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-200 shadow-md hover:shadow-lg"
            @click="getName"
            aria-label="get name"
          >
            Name from API is: {{ name }}
          </button>
        </div>
      </div>
    </div>

    <DynamicDialog />
    <ConfirmDialog />
    <Toast />
    <RouterView />
  </div>
</template>
