import React, { useState } from "react";
import axios from "axios";
import "./contact-form.style.scss";
import Dog from "../../assets/images/main/contact-form/mask.svg";
import BluePlanet from "../../assets/images/main/contact-form/Planet Blue.svg";
import YellowPlanet from "../../assets/images/main/contact-form/Planet Yellow.svg";

import FormInput from "../form-input/form-input.component";
import CustomButton from "../custom-button/custom-button.component";

const postForm = (e, data) => {
  e.preventDefault();
  console.log("post form", data);
  axios
    .post("http://127.0.0.1:3005/contact", data)
    .then((res) => console.log(res));
};

const ContactForm = () => {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
  });

  const setName = (name) => {
    setFormData({ ...formData, name: name });
  };

  const setEmail = (email) => {
    setFormData({ ...formData, email: email });
  };

  const setPhone = (phone) => {
    setFormData({ ...formData, phone: phone });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(e);
  };

  return (
    <div className="container contact-form">
      <h2>Let’s bring your project to the Moon</h2>

      <div className="image">
        <img src={Dog} alt="cute dog in space" />
        <img src={BluePlanet} alt="blue planet" className="planet blue" />
        <img src={YellowPlanet} alt="yellow planet" className="planet yellow" />
      </div>

      {/* <form
        // action="http://127.0.0.1:3005/contact"
        className="container"
        // method="POST"
        onSubmit={(e) => postForm(e, formData)}
      >
        <FormInput
          name="name"
          type="text"
          label="Name"
          onChange={setName}
          required
        />
        <FormInput
          name="email"
          type="email"
          label="E-mail"
          onChange={setEmail}
          required
        />
        <FormInput
          name="phone"
          type="tel"
          label="Phone"
          onChange={setPhone}
          required
        />

        <CustomButton text="Send" />
      </form> */}
    </div>
  );
};

export default ContactForm;