"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 SiloMart deals list");
    setEmail("");
  };

  return (
    <form onSubmit={onSubscribe} className="mt-6 search-bin max-w-md">
      <input
        type="email"
        required
        value={email}
        onChange={(event) => setEmail(event.target.value)}
        placeholder="Email for deals"
        className="!pl-4 text-[var(--on-brand)] placeholder:text-[var(--on-brand)]/45"
      />
      <button type="submit" className="btn-bin btn-bin-straw">
        Join
      </button>
    </form>
  );
}