"use client";

import { FormEvent, useState } from "react";

export default function EnquiryForm() {
  const [submitted, setSubmitted] = useState(false);

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSubmitted(true);
  }

  return (
    <form className="enquiry-form" id="enquiry" onSubmit={handleSubmit}>
      <h3>Enquiry Form</h3>
      <p className="enquiry-form-lead">
        Get Floor Plans, Prices &amp; Available Units
      </p>

      <label>
        Full Name
        <input type="text" name="fullName" required placeholder="Enter your full name" />
      </label>

      <label>
        Mobile Number
        <input type="tel" name="mobile" required placeholder="Enter mobile number" />
      </label>

      <label>
        Email Address (Optional)
        <input type="email" name="email" placeholder="Enter email address" />
      </label>

      <label>
        Interested In
        <select name="interest" required defaultValue="">
          <option value="" disabled>
            Select property type
          </option>
          <option>Ground Floor Retail</option>
          <option>First Floor Retail</option>
          <option>Food Court</option>
          <option>Office Suite</option>
          <option>Office Space</option>
        </select>
      </label>

      <button className="btn btn-primary" type="submit">
        Get Project Details
      </button>

      {submitted ? (
        <p className="form-success" role="status">
          Thank you. Our team will share the latest project details shortly.
        </p>
      ) : null}
    </form>
  );
}