import React from "react";
import { FaPaperPlane, FaPlane } from "react-icons/fa";
import { Form } from "react-router-dom";
import useDocumentTitle from "../hooks/useDocumentTitle";

const Contact = () => {
  useDocumentTitle('NSBC | Contact');

  const contact = {
    first: "Your",
    last: "Name",
    avatar: "https://placekitten.com/g/200/200",
    twitter: "your_handle",
    notes: "Some notes",
    favorite: true,
  };
  return (
    <div className="w-full mt-24">
      <div id="contact" className="w-full">
        <div className="w-full">
          <h1 className="my-5 text-2xl w-full flex justify-center">
            <strong>Contact North Shreve Baptist Church</strong>
          </h1>

          <div className="flex justify-center gap-2">
            <Form className="flex flex-col gap-3" action="/api/contact" method="post">
              <div className="w-full grid grid-cols-2 gap-2">
                <div>
                  <p>First name:</p>
                  <input
                    className="w-full py-1 px-2 border border-slate-400 rounded-md"
                    type="text"
                    name="first"
                    placeholder="First Name"
                  />
                </div>
                <div>
                    <p>Last name:</p>
                    <input
                      className="w-full py-1 px-2 border border-slate-400 rounded-md"
                      type="text"
                      name="last"
                      placeholder="Last Name"
                    />
                </div>
              </div>
              <div className="w-full grid grid-cols-2 gap-2">
                <div>
                  <p>Email:</p>
                  <input
                    className="w-full py-1 px-2 border border-slate-400 rounded-md"
                    type="text"
                    name="email"
                    placeholder="Email"
                  />
                </div>
                <div>
                    <p>Phone:</p>
                    <input
                      className="w-full py-1 px-2 border border-slate-400 rounded-md"
                      type="text"
                      name="phone"
                      placeholder="Phone"
                    />
                </div>
              </div>
              <div className="w-full flex flex-col gap-2">
                <p>Message:</p>
                <textarea
                  className=" w-full py-1 px-2 border border-slate-400 rounded-md"
                  type="text"
                  name="message"
                  placeholder="Message"
                  rows="8"
                  
                />
              </div>
              <div className="w-full flex justify-end gap-2">
              <button
                className="py-1 px-2 bg-red-800 text-white rounded-md"
                type="reset"
              >Reset </button>
                <button
                  className=" flex justify-center gap-1 items-center bg-green-600 rounded-md py-1 px-2 text-white"
                  type="submit"
                >
                  Send <FaPaperPlane />
                </button>
              </div>
            </Form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Contact;
