<script setup lang="ts">
import { NEl, useThemeVars } from 'naive-ui';
import { computed } from 'vue';
import Noise from '../components/Noise.vue';

defineProps<{ title?: string; subtitle?: string }>();

const themeVars = useThemeVars();

// Мягкие цветовые «пятна» фона на основе текущей темы (как в onboard).
const blobBg = computed(() => {
    const p = themeVars.value.primaryColor;
    const w = themeVars.value.warningColor;
    const i = themeVars.value.infoColor;

    return [
        `radial-gradient(circle 14vw at 50% -6%, color-mix(in srgb, ${p} 22%, transparent), transparent 100%)`,
        `radial-gradient(circle 18vw at 104% 50%, color-mix(in srgb, ${w} 22%, transparent), transparent 100%)`,
        `radial-gradient(circle 18vw at -6% 104%, color-mix(in srgb, ${i} 22%, transparent), transparent 100%)`,
    ].join(', ');
});
</script>

<template>
    <Noise />

    <NEl class="relative flex min-h-screen items-center justify-center p-4">
        <div class="pointer-events-none fixed inset-0 z-0">
            <div class="absolute inset-0" :style="`background: ${blobBg};`" />
            <div class="grid-overlay absolute inset-0 opacity-60" />
        </div>

        <div class="relative z-10 w-full max-w-sm">
            <div v-if="title || subtitle" class="mb-5 text-center">
                <h1 v-if="title" class="text-xl font-semibold">{{ title }}</h1>
                <p v-if="subtitle" class="mt-1 text-sm opacity-70">
                    {{ subtitle }}
                </p>
            </div>

            <slot />
        </div>
    </NEl>
</template>
