"use client";

import { useState } from "react";
import { Button } from "./Button";

export function NewsletterSignup() {
  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="text-center py-4">
        <p className="text-bosphorus font-semibold">You&apos;re in! Check your inbox for the insider edit.</p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="flex gap-3 max-w-md">
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Your email"
        required
        className="flex-1 px-5 py-3 rounded-full border border-deep-nazar/20 bg-white text-deep-nazar placeholder:text-deep-nazar/40 focus:outline-none focus:border-bosphorus focus:ring-2 focus:ring-bosphorus/20 transition-all"
      />
      <Button variant="primary" size="sm">
        Subscribe
      </Button>
    </form>
  );
}