import { useState } from "react";

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

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

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

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log("Form Data:", formData);

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

    alert(
      `Form Submitted!\n\n` +
        `Name: ${name}\n` +
        `Contact Person: ${contact_person}\n` +
        `Email: ${email}\n` +
        `Phone: ${phone}\n` +
        `Size: ${size}\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: "Name of Land owner/s", name: "name", type: "text" },
            {
              label: "Name of contact person",
              name: "contact_person",
              type: "text",
            },
            { label: "Your Email", name: "email", type: "email" },
            { label: "Phone Number", name: "phone", type: "text" },
            { label: "Location of the land", name: "location", type: "text" },
            { label: "Land size (in katha)", name: "size", type: "text" },
          ] as { label: string; name: keyof FormData; type: string }[]
        ).map((input) => (
          <div key={input.name} className="mb-10">
            <input
              type={input.type}
              name={input.name}
              placeholder={input.label}
              value={formData[input.name]}
              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 LandOwnerContactForm;