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

export interface ContactCenterProps {
  tag?: string;
  title: string;
  description?: string;
  contactEmail?: string;
  contactPhone?: string;
  useInvertedBackground?: boolean;
  className?: string;
  containerClassName?: string;
}

export const ContactCenter: React.FC<ContactCenterProps> = ({
  tag,
  title,
  description,
  contactEmail,
  contactPhone,
  useInvertedBackground = false,
  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", className)}>
        {tag && <p className="text-sm font-semibold mb-2 text-accent">{tag}</p>}
        <h2 className="text-4xl font-bold mb-4">{title}</h2>
        {description && <p className="text-lg text-muted-foreground mb-8">{description}</p>}

        <form onSubmit={handleSubmit} className="space-y-4">
          <input
            type="email"
            placeholder="your@email.com"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="w-full px-4 py-2 border rounded-lg"
            required
          />
          <button type="submit" className="w-full px-4 py-2 bg-primary text-white rounded-lg">
            Send
          </button>
        </form>

        {contactEmail && <p className="mt-6 text-sm text-muted-foreground">Email: {contactEmail}</p>}
        {contactPhone && <p className="text-sm text-muted-foreground">Phone: {contactPhone}</p>}
      </div>
    </div>
  );
};

export default ContactCenter;
