"use client";

import { useActionState } from "react";
import { subscribe } from "@/app/(store)/actions";

export default function NewsletterForm({ source, label = "Get notified" }: { source: string; label?: string }) {
  const [state, action, pending] = useActionState(subscribe, null);
  if (state?.ok) return <p role="status" className="font-display text-[22px]">{state.message}</p>;
  return (
    <form action={action} className="flex flex-col sm:flex-row gap-3">
      <input type="hidden" name="source" value={source} />
      <label htmlFor={`nl-${source}`} className="sr-only">Email address</label>
      <input id={`nl-${source}`} name="email" type="email" required placeholder="Email address" className="field flex-1" autoComplete="email" />
      <button className="btn-solid" disabled={pending}>{pending ? "Adding…" : label}</button>
      {state?.message && <p role="alert" className="text-rose text-sm sm:basis-full">{state.message}</p>}
    </form>
  );
}