import { useContactForm } from './hooks/useContactForm'
import FormField from './components/FormField'
import './App.css'

function App() {
  const { fields, errors, loginError, success, handlers, handleSubmit } = useContactForm()

  return (
    <div className="page">
      <div className="card">
        <h1 className="card__title">Bejelentkezés</h1>
        <p className="card__subtitle">Add meg az adataidat.</p>

        {success ? (
          <div className="alert alert--success">
            Sikeres bejelentkezés! Üdvözlünk, {fields.name}!
          </div>
        ) : (
          <form className="form" onSubmit={handleSubmit} noValidate>
            <FormField
              id="name"
              label="Név"
              value={fields.name}
              onChange={handlers.setName}
              error={errors.name}
            />
            <FormField
              id="email"
              label="Email"
              type="email"
              value={fields.email}
              onChange={handlers.setEmail}
              error={errors.email}
            />

            {loginError && (
              <div className="alert alert--error" role="alert">
                {loginError}
              </div>
            )}

            <button className="form__submit" type="submit">
              Bejelentkezés
            </button>
          </form>
        )}
      </div>
    </div>
  )
}

export default App