import React, { useState } from "react";
import InputField from "./InputField";

function ChangeUsername(): JSX.Element {
  const [newUsername, setNewUsername] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    setNewUsername(e.target.value);
  };

  // const handleSubmit = async (): Promise<void> => {
  //   try {
  //     // Call the API function to update the username
  //     await api.updateUsername(newUsername);
  //     // Optionally, add a success message or redirect the user
  //   } catch (error) {
  //     console.error("Error updating username:", error);
  //     // Optionally, handle the error
  //   }
  // };

  return (
    <div>
      <InputField
        label="New Username"
        type="text"
        value={newUsername}
        onChange={handleChange}
      />
    </div>
  );
}

export default ChangeUsername;