import { submitEnquiry } from "@/app/contact/actions";

const field =
  "w-full rounded border border-stone-300 px-3 py-2 text-sm outline-none focus:border-brand focus:ring-1 focus:ring-brand";

export function SidebarEnquiryForm({ propertyId, area, type }: { propertyId: number; area?: string; type?: string }) {
  return (
    <form action={submitEnquiry} className="rounded border border-stone-200 bg-white p-5">
      <h2 className="text-[20px] text-black">Enquire</h2>
      <input type="hidden" name="propertyId" value={propertyId} />
      {area && <input type="hidden" name="areaOfInterest" value={area} />}
      {type && <input type="hidden" name="propertyTypeInterest" value={type} />}

      <div className="mt-4 flex flex-col gap-3">
        <label className="flex flex-col gap-1">
          <span className="text-[12px] font-medium text-stone-500">First name *</span>
          <input name="firstName" required className={field} />
        </label>
        <label className="flex flex-col gap-1">
          <span className="text-[12px] font-medium text-stone-500">Last name *</span>
          <input name="lastName" required className={field} />
        </label>
        <label className="flex flex-col gap-1">
          <span className="text-[12px] font-medium text-stone-500">Phone number *</span>
          <input name="phone" type="tel" required className={field} />
        </label>
        <label className="flex flex-col gap-1">
          <span className="text-[12px] font-medium text-stone-500">Email *</span>
          <input name="email" type="email" required className={field} />
        </label>
        <label className="flex flex-col gap-1">
          <span className="text-[12px] font-medium text-stone-500">Message</span>
          <textarea name="message" rows={3} className={field} />
        </label>
        <button
          type="submit"
          className="mt-1 flex h-[38px] items-center justify-center rounded-md bg-brand text-[14px] font-semibold tracking-wide text-white uppercase hover:bg-brand-deep"
        >
          Submit
        </button>
      </div>
    </form>
  );
}