"use client"

import { AnimatePresence, motion } from "motion/react"
import { useState, type ReactNode } from "react"
import { ease } from "./motion"

// Formulare der Vorlagen senden nichts – nach dem Absenden erscheint eine Bestätigung mit Demo-Hinweis
export function DemoForm({ children, success, className }: { children: ReactNode; success: ReactNode; className?: string }) {
    const [sent, setSent] = useState(false)

    return (
        <AnimatePresence mode="wait" initial={false}>
            {sent ? (
                <motion.div
                    key="sent"
                    className={className}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, ease }}
                    role="status"
                >
                    {success}
                    <p className="mt-4 text-sm opacity-60">
                        Demo-Hinweis: Auf Ihrer fertigen Webseite landet diese Anfrage direkt in Ihrem Postfach.
                    </p>
                </motion.div>
            ) : (
                <motion.form
                    key="form"
                    className={className}
                    exit={{ opacity: 0, y: -20 }}
                    transition={{ duration: 0.4, ease }}
                    onSubmit={(event) => {
                        event.preventDefault()
                        setSent(true)
                    }}
                >
                    {children}
                </motion.form>
            )}
        </AnimatePresence>
    )
}