import React from 'react';

import { useForm } from 'react-hook-form';

interface FormularioRegistroProps {
onSubmit: (data: Registro) => void;
registroActual?: Registro;
}

const FormularioRegistro: React.FC<FormularioRegistroProps> = ({ onSubmit,

registroActual }) => {
const { register, handleSubmit, reset, setValue, formState: { errors } } =
useForm<Registro>();

const handleFormSubmit = (data: Registro) => {

onSubmit(data);
reset();
};

return (
<form onSubmit={handleSubmit(handleFormSubmit)}>
<div>
<label>Nombre:</label>
<input {...register('nombre', { required: true })}
defaultValue={registroActual?.nombre} />
{errors.nombre && <span>Este campo es obligatorio</span>}
</div>
<div>
<label>Apellido:</label>
<input {...register('apellido', { required: true })}
defaultValue={registroActual?.apellido} />
{errors.apellido && <span>Este campo es obligatorio</span>}
</div>
<div>
<label>Cédula:</label>
<input {...register('cedula', { required: true })}
defaultValue={registroActual?.cedula} />
{errors.cedula && <span>Este campo es obligatorio</span>}
</div>
<div>
<label>Correo Electrónico:</label>
<input {...register('correo', { required: true, pattern: /^\S+@\S+$/i })}
defaultValue={registroActual?.correo} />
{errors.correo && <span>Ingrese un correo electrónico válido</span>}
</div>
<button type="submit">{registroActual ? 'Editar' : 'Agregar'}</button>
</form>
);
};

export default FormularioRegistro;