import React, { useState } from "react";
import { cn } from "@/lib/utils";

export interface ContactSplitFormProps {
  tag?: string;
  title: string;
  description: string;
  useInvertedBackground?: boolean;
  inputPlaceholder?: string;
  buttonText?: string;
  className?: string;
  containerClassName?: string;
}

export const ContactSplitForm: React.FC<ContactSplitFormProps> = ({
  tag,
  title,
  description,
  useInvertedBackground = false,
  inputPlaceholder = "Enter your email",  buttonText = "Sign Up",  className,
  containerClassName
}) => {
  const [email, setEmail] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setEmail("");
  };

  return (
    <div
      className={cn(
        "w-full py-20 px-4",        useInvertedBackground && "bg-accent/10",        containerClassName
      )}
    >
      <div className={cn("max-w-2xl mx-auto text-center space-y-6", className)}>
        {tag && <p className="text-sm font-semibold text-accent">{tag}</p>}
        <h2 className="text-4xl font-bold">{title}</h2>
        <p className="text-lg text-muted-foreground">{description}</p>

        <form onSubmit={handleSubmit} className="space-y-4">
          <input
            type="email"
            placeholder={inputPlaceholder}
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
            required
          />
          <button type="submit" className="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
            {buttonText}
          </button>
        </form>
      </div>
    </div>
  );
};

export default ContactSplitForm;
