"use client"

import { createContext, useContext, type ReactNode } from "react"

// Portal-Rahmen einer Vorlage (Entwurfs-Hinweis, KI-Chat, Demo-Hinweise). Setzt nur der TemplateRenderer im Portal –
// exportierte Projekte (modules/templates/export) rendern die Vorlagen ohne diesen Kontext und zeigen davon nichts.
export const DemoContext = createContext<{ overlay: ReactNode } | null>(null)

export function useDemo() {
    return useContext(DemoContext)
}

// Erklärt, was auf der fertigen Seite live passieren würde – erscheint nur in der Demo
export function DemoNote({ children, className, as: Tag = "p" }: { children: ReactNode; className?: string; as?: "p" | "span" }) {
    const demo = useDemo()
    if (!demo) return null
    return <Tag className={className}>{children}</Tag>
}