import { useState } from "react"
import api from "../../services/api"

export default function CreateAccount() {
  const [form, setForm] = useState({
    name: "",
    email: "",
    password: ""
  })

  const handleChange = e => {
    setForm({
      ...form,
      [e.target.name]: e.target.value
    })
  }

  const submit = async e => {
    e.preventDefault()

    try {
      const res = await api.post("/auth/create-account", form)
      alert(res.data.message)

      setForm({
        name: "",
        email: "",
        password: ""
      })
    } catch (err) {
      alert("Failed to create account")
    }
  }

  return (
    <div className="auth-page">
      <h2>Create Account</h2>

      <form onSubmit={submit}>
        <input
          name="name"
          placeholder="Name"
          value={form.name}
          onChange={handleChange}
        />

        <input
          name="email"
          placeholder="Email"
          value={form.email}
          onChange={handleChange}
        />

        <input
          name="password"
          type="password"
          placeholder="Password"
          value={form.password}
          onChange={handleChange}
        />

        <button>Create Account</button>
      </form>
    </div>
  )
}
