<script setup>
defineProps({
  title: { type: String, required: true },
  subtitle: { type: String, default: "" },
});
</script>

<template>
  <div class="auth-bg flex h-full items-center justify-center overflow-auto p-6">
    <div class="relative z-10 w-full max-w-md">
      <div class="mb-8 text-center">
        <h1 class="gradient-text text-3xl font-bold tracking-tight"></h1>
        <p v-if="subtitle" class="mt-2 text-sm text-text-muted">{{ subtitle }}</p>
      </div>

      <div class="glass-card rounded-xl p-6 md:p-8">
        <h2 class="mb-6 font-mono text-lg font-semibold text-slate-100">
          {{ title }}
        </h2>
        <slot />
      </div>
    </div>
  </div>
</template>
