<script setup>
import AppLayout from '@/Layouts/AppLayout.vue'

const props = defineProps({
  example: { type: String, default: 'Demo' },
})
</script>

<template>
  <AppLayout title="Testing Sandbox">
    <div class="space-y-6">
      <div class="prose dark:prose-invert max-w-none">
        <h1 class="text-2xl font-semibold">Testing Page</h1>
        <p>This page is for quick UI or component experiments. Remove or adapt as needed.</p>
      </div>
      <div class="rounded-lg border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-800/60 p-4 shadow-sm">
        <h2 class="text-sm font-semibold tracking-wide uppercase text-slate-500 dark:text-slate-400 mb-3">Example Area</h2>
        <p class="text-slate-700 dark:text-slate-200 text-sm">Prop example value: <span class="font-mono">{{ props.example }}</span></p>
      </div>
    </div>
  </AppLayout>
</template>
