import { FormEvent, useState } from 'react'
import { api } from './api'

export default function Login({ onLogin }: { onLogin: () => void }) {
  const [pw, setPw] = useState('')
  const [err, setErr] = useState('')
  const [busy, setBusy] = useState(false)

  async function submit(e: FormEvent) {
    e.preventDefault()
    setBusy(true); setErr('')
    try { await api.login(pw); onLogin() }
    catch (e) { setErr(e instanceof Error ? e.message : 'login failed') }
    finally { setBusy(false) }
  }

  return (
    <div className="center">
      <form className="login" onSubmit={submit}>
        <img className="login-logo" src="/icons/logo.png" alt="" width={160} height={160} />
        <h1>Ham Lab</h1>
        <input type="password" autoFocus autoComplete="current-password" placeholder="password"
          value={pw} onChange={(e) => setPw(e.target.value)} />
        <button disabled={busy || !pw}>{busy ? '…' : 'Sign in'}</button>
        {err && <div className="error">{err}</div>}
      </form>
    </div>
  )
}