text: import React, { useState } from "react";
  
  import Card from "../UI/Card";
  import Button from "../UI/Button";
  import ErrorModal from "../UI/ErrorModal";
  import "./AddUser.css";
  
  const AddUser = (props) => {
    const [enteredUsername, setEnteredUsername] = useState("");
    const [enteredAge, setEnteredAge] = useState("");
    const [error, setError] = useState("");
  
    const addUserHandler = (event) => {
      event.preventDefault();
      if (enteredUsername.trim().length === 0 || enteredAge.trim().length === 0) {
        setError({
          title: "Invalid Input",
          message: "Please enter a valid name and age (non-empty values).",
        });
        return;
      }
      if (enteredAge < 1) {
        setError({
          title: "Invalid age",
          message: "Please enter a valid age (>0).",
        });
        return;
      }
      props.onAddUser(enteredUsername, enteredAge);
      console.log(enteredUsername, enteredAge);
      setEnteredUsername("");
      setEnteredAge("");
    };
  
    const usernameChangeHandler = (event) => {
      setEnteredUsername(event.target.value);
    };
  
    const ageChangeHandler = (event) => {
      setEnteredAge(event.target.value);
    };
  
    const errorhandler = () => {
      setError(null);
    };
  
    return (
      <div>
        {error && (
          <ErrorModal
            title={error.title}
            message={error.message}
            onConfirm={errorhandler}
          />
        )}
        <Card className="input">
          <form onSubmit={addUserHandler}>
            <label htmlFor="username">Username</label>
            <input
              id="username"
              type="text"
              value={enteredUsername}
              onChange={usernameChangeHandler}
            />
            <label htmlFor="age">Age (Years)</label>
            <input
              id="age"
              type="number"
              value={enteredAge}
              onChange={ageChangeHandler}
            />
            <Button type="submit">Add User</Button>
          </form>
        </Card>
      </div>
    );
  };
  
  export default AddUser;
  