Email signup

"use client";

import * as React from "react";
import { CheckIcon, Loader2Icon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

type EmailSignupProps = Omit<React.ComponentProps<"form">, "onSubmit"> & {
  /** Called with the address. Return a promise to show a pending state until it settles. */
  onSubmit?: (email: string) => void | Promise<void>;
  /** Placeholder in the field. */
  placeholder?: string;
  /** Label of the submit button. */
  buttonLabel?: string;
  /** Shown with a check mark once the submit settles. */
  successText?: string;
  /** Left aligned by default; center for a hero or a footer column. */
  align?: "start" | "center";
};

const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

/**
 * One line: an email field with the submit button on the right.
 * Validates the address, shows a pending state and swaps the row for a success line.
 */
export function EmailSignup({
  onSubmit,
  placeholder = "you@example.com",
  buttonLabel = "Subscribe",
  successText = "Check your inbox",
  align = "start",
  className,
  ...props
}: EmailSignupProps) {
  const id = React.useId();
  const [email, setEmail] = React.useState("");
  const [status, setStatus] = React.useState<"idle" | "pending" | "done">("idle");
  const [error, setError] = React.useState<string | null>(null);

  const submit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const value = email.trim();
    if (!EMAIL.test(value)) {
      setError("Enter a valid email address");
      return;
    }
    setError(null);
    try {
      setStatus("pending");
      await onSubmit?.(value);
      setStatus("done");
    } catch {
      setStatus("idle");
      setError("Something went wrong, try again");
    }
  };

  const pending = status === "pending";
  const centered = align === "center";

  return (
    <form
      noValidate
      onSubmit={submit}
      data-slot="email-signup"
      data-status={status}
      className={cn("flex w-full max-w-sm flex-col gap-1.5", centered && "mx-auto items-center text-center", className)}
      {...props}
    >
      {status === "done" ? (
        <div role="status" className="flex h-8 items-center gap-2 text-sm font-medium text-foreground">
          <CheckIcon className="size-4" aria-hidden="true" />
          <span>{successText}</span>
        </div>
      ) : (
        <>
          <div className="flex w-full items-center gap-2">
            <label htmlFor={id} className="sr-only">
              Email address
            </label>
            <Input
              id={id}
              type="email"
              name="email"
              autoComplete="email"
              inputMode="email"
              placeholder={placeholder}
              value={email}
              onChange={(e) => {
                setEmail(e.target.value);
                if (error) setError(null);
              }}
              disabled={pending}
              aria-invalid={error ? true : undefined}
              aria-describedby={error ? `${id}-error` : undefined}
              className="flex-1"
            />
            <Button type="submit" disabled={pending} aria-busy={pending || undefined}>
              {pending && (
                <Loader2Icon
                  data-icon="inline-start"
                  className="animate-spin motion-reduce:animate-none"
                  aria-hidden="true"
                />
              )}
              {buttonLabel}
            </Button>
          </div>
          <p id={`${id}-error`} aria-live="polite" className={cn("m-0 text-xs text-destructive", !error && "sr-only")}>
            {error ?? ""}
          </p>
        </>
      )}
    </form>
  );
}