"use client";

import { useState } from "react";

import styles from "../blog.module.css";

/** Newsletter signup. No backend yet — // TODO: wire to email service. */
export function NewsletterForm({
  placeholder,
  ariaLabel,
  submitLabel,
  submittedLabel,
}: {
  placeholder: string;
  ariaLabel: string;
  submitLabel: string;
  submittedLabel: string;
}) {
  const [done, setDone] = useState(false);

  return (
    <form
      className={styles.nlForm}
      onSubmit={(e) => {
        e.preventDefault();
        // TODO: wire to backend / email service.
        setDone(true);
      }}
    >
      <input
        type="email"
        name="email"
        placeholder={placeholder}
        required
        aria-label={ariaLabel}
        autoComplete="email"
        inputMode="email"
        autoCapitalize="none"
        spellCheck={false}
        enterKeyHint="send"
      />
      <button
        type="submit"
        className={`${styles.btn} ${styles.btnPrimary}`}
        disabled={done}
      >
        {done ? submittedLabel : submitLabel}
      </button>
    </form>
  );
}