<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const heading = computed(() => route.meta.title || "Page");
</script>

<template>
  <div class="card rounded-xl border border-surface p-6">
    <h1 class="title-h7 text-xl font-semibold text-left mb-2 text-surface-900 dark:text-surface-0">
      {{ heading }}
    </h1>
    <p class="text-surface-600 dark:text-surface-400">
      Replace this placeholder with a real Maestro screen.
    </p>
  </div>
</template>
