"use client";

import SubmitContact from "@/components/contact";
import { useActionState } from "react";
import ReCAPTCHA from "react-google-recaptcha";

export default function ContactComponent({
  recaptchaSiteKey,
}: {
  recaptchaSiteKey: string;
}) {
  const inputStyle = {
    backgroundColor: "#111",
    color: "#eee",
    borderWidth: 0,
    padding: "1rem",
  };
  const [state, formAction, pending] = useActionState(SubmitContact, null);

  return (
    <>
      Need to get in touch?
      <br />
      <br />
      <form
        action={formAction}
        style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
      >
        <input
          style={inputStyle}
          type="text"
          name="name"
          placeholder="Your Name"
          required
        />
        <input
          style={inputStyle}
          type="email"
          name="email"
          placeholder="Your Email"
          required
        />
        <textarea
          style={{ ...inputStyle, resize: "none", height: "5rem" }}
          name="message"
          placeholder="Your Message"
          required
        ></textarea>
        {state && (
          <span
            style={{
              padding: "1rem",
              backgroundColor: "error" in state ? "#f003" : "#0f03",
            }}
          >
            {"error" in state && state.error}
            {"success" in state && "Submitted successfully!"}
          </span>
        )}
        <ReCAPTCHA sitekey={recaptchaSiteKey} theme="dark" />
        <button
          type="submit"
          style={{
            ...inputStyle,
            backgroundColor: pending ? "#333" : "#111",
            cursor: pending ? "default" : "pointer",
          }}
          onMouseEnter={(e) => {
            if (!pending) e.currentTarget.style.backgroundColor = "#333";
          }}
          onMouseLeave={(e) => {
            if (!pending) e.currentTarget.style.backgroundColor = "#111";
          }}
          disabled={pending}
        >
          {pending ? "Sending..." : "Submit"}
        </button>
      </form>
    </>
  );
}