"use client";

import { useState } from "react";

interface Props {
  placeholder: string;
  buttonLabel: string;
}

export function SubscribeForm({ placeholder, buttonLabel }: Props) {
  const [email, setEmail] = useState("");
  const [done, setDone] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!email) return;
    setDone(true);
  };

  if (done) {
    return (
      <p className="rounded-xl bg-emerald-50 px-5 py-3 text-sm font-medium text-emerald-700">
        ✓ {email}
      </p>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="flex gap-3">
      <input
        type="email"
        required
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder={placeholder}
        className="flex-1 rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
      />
      <button
        type="submit"
        className="rounded-xl bg-brand-700 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-brand-800"
      >
        {buttonLabel}
      </button>
    </form>
  );
}
