"use client";

import { useState, type FormEvent } from "react";
import { useToast } from "@/context/toast-context";

/** Client-only newsletter signup used inside the server Footer. */
export function FooterNewsletter() {
  const { toast } = useToast();
  const [email, setEmail] = useState("");

  const onSubscribe = (event: FormEvent) => {
    event.preventDefault();
    if (!email.trim()) return;
    toast("You're on the BhoFit list");
    setEmail("");
  };

  return (
    <form onSubmit={onSubscribe} className="mt-6 flex max-w-md gap-2">
      <input
        type="email"
        required
        value={email}
        onChange={(event) => setEmail(event.target.value)}
        placeholder="Email for deals"
        className="h-10 flex-1 border border-border bg-[var(--paper)] px-3 text-sm text-foreground outline-none transition focus:border-foreground"
      />
      <button
        type="submit"
        className="h-10 shrink-0 bg-foreground px-4 text-[11px] font-medium uppercase tracking-[0.16em] text-background transition hover:bg-[var(--accent)]"
      >
        Join
      </button>
    </form>
  );
}