import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

export function Newsletter({ dark = false }: { dark?: boolean }) {
  const [email, setEmail] = useState("");
  return (
    <form
      className="flex gap-2"
      onSubmit={(e) => {
        e.preventDefault();
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { toast.error("Please enter a valid email address."); return; }
        // TODO(stage 2): persist to the newsletter table.
        toast.success("Thank you! We'll keep you updated.");
        setEmail("");
      }}
    >
      <Input
        type="email"
        required
        maxLength={255}
        aria-label="Email address"
        placeholder="you@email.com"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className={cn("h-11 rounded-full", dark && "border-primary-foreground/20 bg-primary-foreground/10 text-primary-foreground placeholder:text-primary-foreground/50")}
      />
      <Button type="submit" variant="gold" className="h-11 px-5">Join</Button>
    </form>
  );
}