import { loginFn } from "#/lib/auth.functions";
import { useServerFn } from "@tanstack/react-start";
import { useState, type ChangeEvent } from "react";

export function LoginForm() {
  const login = useServerFn(loginFn);
  const [handle, setHandle] = useState("");

  async function handleSubmit(e: ChangeEvent) {
    e.preventDefault();
    await login({ data: { handle }});
  }

  return (
    <form onSubmit={handleSubmit} className="flex gap-4 items-end">
      <label className="flex flex-col gap-1">
        <span className="text-sm">Atmosphere Handle</span>
        <input
          type="text"
          value={handle}
          onChange={e => setHandle(e.target.value)}
          className="border px-3 py-1"
          placeholder="jcsalterego.bsky.social"
        />
      </label>
      <button type="submit" className="border px-3 py-1 hover:bg-gray-200">Login</button>
    </form>
  );
}