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

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

  async function submit() {
    setLoading(true);
    const r = await api.post("/auth/login", { email, password });
    setAccessToken(r.data.accessToken);
    nav("/");
  }

  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">Login</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} disabled={loading} className="btn w-full bg-blue-600 hover:bg-blue-500">
          {loading ? "..." : "Login"}
        </button>
      </div>
    </div>
  );
}