"use client";
import api from "@/service/api";
import { useForm } from "react-hook-form";
import { toast } from "react-toastify";
import InputGroup from "../_components/InputGroup";
type TContactUsForm = {
  full_name: string;
  company_name: string;
  work_email: string;
  phone_number: string;
};
const ContactUsForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<TContactUsForm>();
  const onSubmit = async (data: TContactUsForm) => {
    try {
      const response = (await api.post("inquiries", { ...data })).data;
      toast.success(response.message);
    } catch (error) {
      console.log(error);
      toast.error("Something went wrong");
      throw error;
    }
  };
  return (
    <form
      className="w-full px-4 md:px-16 py-10 grid md:grid-cols-2 gap-4 "
      onSubmit={handleSubmit(onSubmit)}>
      <InputGroup
        id="full_name"
        label="Full Name"
        register={register}
        type="text"
      />
      <InputGroup
        id="company_name"
        label="Company Name"
        register={register}
        type="text"
      />
      <InputGroup
        id="work_email"
        label="Work Email"
        register={register}
        type="email"
      />
      <InputGroup
        id="phone_number"
        label="Phone Number"
        register={register}
        type="text"
        error={errors.phone_number?.message}
        validation={{
          pattern: {
            value: /^[+\d]+$/,
            message: "Please enter a valid phone number",
          },
        }}
      />
      <div className="md:col-span-2 flex justify-end">
        <button className="bg-(--primary) w-fit text-white rounded-full py-4 px-6">
          Register Now
        </button>
      </div>
    </form>
  );
};

export default ContactUsForm;