import axios from "axios";
import { useState, useEffect } from "react";

export default function Form() {
	const [message, setMessage] = useState("");
	const [name, setName] = useState("");
	const [mail, setMail] = useState("");
	const [tel, setTel] = useState("");
	const sendMail = (e) => {
		e.preventDefault();
		axios
			.post("/api/hello", {
				msg: message,
				name: name,
				mail: mail,
				tel: tel,
			})
			.then(function (response) {
				console.log(response);
			})
			.catch(function (error) {
				console.log(error);
			});
	};
	return (
		<div className="flex flex-row px-48 justify-around">
			<form className="flex flex-col py-12">
				<input
					name="name"
					placeholder="Imię"
					className="border border-slate-300 h-8 w-[32rem] mt-4 px-4 transition ease-in-out m-0 focus:text-gray-700 focus:border-blue-600 focus:outline-none"
					onChange={(e) => {
						setName(e.target.value);
					}}
				></input>

				<span className="flex flex-row w-[32rem]">
					<input
						name="phone"
						placeholder="Telefon"
						className="mr-1 border border-slate-300 h-8 w-[16rem] mt-4 px-4 transition ease-in-out m-0 focus:text-gray-700 focus:border-blue-600 focus:outline-none"
						onChange={(e) => {
							setTel(e.target.value);
						}}
					></input>
					<input
						name="email"
						placeholder="Email"
						className="ml-1 border border-slate-300 h-8 w-[16rem] mt-4 px-4 transition ease-in-out m-0 focus:text-gray-700 focus:border-blue-600 focus:outline-none"
						onChange={(e) => {
							setMail(e.target.value);
						}}
					></input>
				</span>

				<textarea
					name="message"
					placeholder="Wiadomość"
					className="border border-slate-300 h-64 w-[32rem] mt-4 px-4 py-4 transition ease-in-out m-0 focus:text-gray-700 focus:border-blue-600 focus:outline-none"
					onChange={(e) => {
						setMessage(e.target.value);
					}}
				></textarea>
				<button
					className="bg-red-500 text-gray-100 font-medium mt-4 px-3 py-3 w-[32rem] ring-0 ring-offset-2 ring-red-500 transition ease-in-out duration-200 hover:ring-2 hover:bg-rose-600"
					onClick={(e) => {
						sendMail(e);
					}}
				>
					Wyślij
				</button>
			</form>
			<div className="grid place-content-center">
				<img src="/images/envelope.png" className="w-96 p-16"></img>
			</div>
		</div>
	);
}