"use client";

import { useState } from "react";
import { Check, Send } from "lucide-react";
import type { Dictionary } from "@/i18n";

/* Static-export friendly: there is no server, so on submit we hand the address
   to the church inbox via a mailto and show a thank-you state. */
export function Newsletter({
  dict,
  email,
}: {
  dict: Dictionary;
  email?: string;
}) {
  const [value, setValue] = useState("");
  const [done, setDone] = useState(false);

  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!value) return;
    if (email) {
      const subject = encodeURIComponent("Newsletter subscription");
      const body = encodeURIComponent(`Please subscribe this address: ${value}`);
      window.location.href = `mailto:${email}?subject=${subject}&body=${body}`;
    }
    setDone(true);
  };

  if (done) {
    return (
      <p className="flex items-center gap-2 rounded-xl bg-white/10 px-5 py-4 text-sm font-medium text-bg">
        <Check className="size-5 text-bg" />
        {dict.newsletter.thanks}
      </p>
    );
  }

  return (
    <form onSubmit={onSubmit} className="flex w-full max-w-md flex-col gap-3 sm:flex-row">
      <input
        type="email"
        required
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder={dict.newsletter.placeholder}
        aria-label={dict.newsletter.placeholder}
        className="h-12 flex-1 rounded-sm border border-white/25 bg-white/10 px-4 text-bg placeholder:text-bg/50 outline-none transition focus:border-white/60 focus:bg-white/15"
      />
      <button
        type="submit"
        className="inline-flex h-12 items-center justify-center gap-2 rounded-sm bg-bg px-6 text-sm font-semibold text-brand transition hover:bg-white"
      >
        {dict.newsletter.button}
        <Send className="size-4" />
      </button>
    </form>
  );
}