import { useState } from "react";

const CustomerContactForm = () => {
  type FormData = {
    name: string;
    email: string;
    phone: string;
    size: string;
    location: string;
    message: string;
  };

  const [formData, setFormData] = useState<FormData>({
    name: "",
    email: "",
    phone: "",
    size: "",
    location: "",
    message: "",
  });

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name as keyof FormData]: value }));
  };

  const handleSubmit = (e: { preventDefault: () => void }) => {
    e.preventDefault();
    console.log("Form Data:", formData);

    const { name, email, phone, size, location, message } = formData;

    alert(
      `Form Submitted!\n\n` +
        `Name: ${name}\n` +
        `Email: ${email}\n` +
        `Phone: ${phone}\n` +
        `Preferred Size: ${size} sqft\n` +
        `Location: ${location}\n` +
        `Message: ${message}`
    );
  };

  return (
    <div className="flex items-center justify-center min-h-96 bg-transparent px-4 ">
      <form onSubmit={handleSubmit} className="w-full max-w-md p-6 rounded-md">
        {[
          { label: "Your Name", name: "name", type: "text" },
          { label: "Your email", name: "email", type: "email" },
          { label: "Phone Number", name: "phone", type: "text" },
          { label: "Preferred size in sqft", name: "size", type: "text" },
          { label: "Your preferred location", name: "location", type: "text" },
        ].map((input) => (
          <div key={input.name} className="mb-10">
            <input
              type={input.type}
              name={input.name}
              placeholder={input.label}
              value={formData[input.name as keyof FormData]}
              onChange={handleChange}
              className="w-full border-b border-[#333333]/50 bg-transparent focus:outline-none focus:border-[#28241E] py-2 placeholder-[#888888] placeholder:pl-1 placeholder:text-base text-[18px] text-[#333333]"
            />
          </div>
        ))}

        <div className="mb-10">
          <textarea
            name="message"
            placeholder="Your Message"
            value={formData.message}
            onChange={handleChange}
            className="w-full border-b border-[#333333]/50 bg-transparent focus:outline-none focus:border-[#28241E] py-2 placeholder-[#888888] placeholder:pl-1 placeholder:text-base text-[18px] resize-none"
            rows={1}
          />
        </div>

        <div className="flex justify-center">
          <button
            type="submit"
            className="bg-[#333333] text-white px-12 py-3 hover:bg-black transition cursor-pointer"
          >
            Send
          </button>
        </div>
      </form>
    </div>
  );
};

export default CustomerContactForm;