import { useState } from 'react'

const LoginForm = ({ onSubmit, isLoading }) => {
  const [formState, setFormState] = useState({
    user_name: '',
    password: ''
  })

  const handleChange = (event) => {
    const { name, value } = event.target
    setFormState((prev) => ({ ...prev, [name]: value }))
  }

  const handleSubmit = (event) => {
    event.preventDefault()
    onSubmit(formState)
  }

  return (
    <form onSubmit={handleSubmit} className="d-flex flex-column gap-3">
      <div>
        <label htmlFor="user_name" className="form-label">Usuario</label>
        <input
          id="user_name"
          name="user_name"
          type="text"
          className="form-control"
          autoComplete="username"
          value={formState.user_name}
          onChange={handleChange}
          required
        />
      </div>
      <div>
        <label htmlFor="password" className="form-label">Contraseña</label>
        <input
          id="password"
          name="password"
          type="password"
          className="form-control"
          autoComplete="current-password"
          value={formState.password}
          onChange={handleChange}
          required
        />
      </div>
      <button type="submit" className="btn btn-primary" disabled={isLoading}>
        {isLoading ? 'Iniciando...' : 'Iniciar sesion'}
      </button>
    </form>
  )
}

export default LoginForm