import React, { useState } from "react";
import { api } from "../API/API";
import InputField from "./InputField";
import BackButton from "./BackButton";
import Button from "./Button";


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;