import { useState } from "react";
import api from "../api";
import { useNavigate } from "react-router-dom";

export default function Register() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const nav = useNavigate();

  async function submit() {
    await api.post("/auth/register", { email, password });
    nav("/login");
  }

  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="bg-zinc-900 p-6 rounded-xl w-80 space-y-4">
        <h1 className="text-xl font-bold">Register</h1>
        <input className="w-full p-2 rounded bg-zinc-800" placeholder="Email" onChange={e=>setEmail(e.target.value)} />
        <input type="password" className="w-full p-2 rounded bg-zinc-800" placeholder="Password" onChange={e=>setPassword(e.target.value)} />
        <button onClick={submit} className="btn w-full bg-green-600 hover:bg-green-500">
          Create account
        </button>
      </div>
    </div>
  );
}
