import { Button, Label, TextInput } from 'flowbite-react'

import { ForgotPasswordFormValues } from '@/src/interfaces/auth'
import { useForgotPasswordForm } from './useForgotPasswordForm'
import ErrorLabel from '@/src/components/ui/ErrorLabel'

const initialValues: ForgotPasswordFormValues = { email: '' }

export default function ForgotPasswordForm() {
  const {
    values,
    fieldErrors,
    isLoading,
    successMessage,
    error,
    handleChange,
    handleSubmit,
  } = useForgotPasswordForm(initialValues)

  if (successMessage) return <p className="text-center">{successMessage}</p>

  return (
    <div>
      <form className="space-y-4" onSubmit={handleSubmit} noValidate>
        <div>
          <Label htmlFor="email" value="Correo Electrónico" />
          <TextInput
            id="email"
            name="email"
            value={values.email}
            onChange={handleChange}
          />

          {fieldErrors.email && <ErrorLabel value={fieldErrors.email} />}
        </div>
        <div>
          <Button
            type="submit"
            color="primary"
            className="w-full flex justify-center"
            disabled={isLoading}>
            {isLoading ? 'Cargando...' : 'Enviar'}
          </Button>
        </div>
      </form>

      {error && <ErrorLabel value={error} />}
    </div>
  )
}