"use client" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { ArrowRight, LoaderCircle } from "lucide-react" import { useState } from "react" type FormStatus = "idle" | "loading" | "success" | "error" interface NewsletterSectionProps extends React.HTMLAttributes { title?: string onSubscribe?: (email: string) => Promise<{ success: boolean; error?: string }> backgroundEffect?: boolean } export function NewsletterSection({ title = "Get notified when new stuff drops.", onSubscribe, backgroundEffect = true, className, ...props }: NewsletterSectionProps) { const [formState, setFormState] = useState({ email: "", status: "idle" as FormStatus, message: "", }) const isLoading = formState.status === "loading" const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!onSubscribe) return setFormState((prev) => ({ ...prev, status: "loading", message: "" })) try { const result = await onSubscribe(formState.email) if (!result.success) { setFormState((prev) => ({ ...prev, status: "error", message: result.error || "", })) } else { setFormState({ email: "", status: "success", message: "Thanks for subscribing!", }) } } catch (error) { setFormState((prev) => ({ ...prev, status: "error", message: error instanceof Error ? error.message : "Failed to subscribe", })) } } return (

{backgroundEffect && }

{title}

) } function BackgroundEffect() { return ( ) }