import "../style/settings/settings.css"
import { MainTitle, SecondTitle } from "./component/Title"
import {Header} from './template/Header'
import { useState, ChangeEvent } from "react"
import { User } from "./model/User" 

export default function Settings({username} : {username : string}){
    return (
        <div id="main">
            <Header username={username} />
            <Body/>
        </div>
    )
}

function Body() {
    return (
        <div id="body">
            <div id="content">
                <MainTitle title="Paramètres" id={null}/>
                <AccountSettings/>
            </div>
        </div>
    )
}

function AccountSettings(){
    return (
        <div id="account">
            <SecondTitle title="Compte personnel" id={null}/>
            <ContentAccountSettings/>
        </div>
    );
}

function ContentAccountSettings({user} : {user : User}) {
    // Utilisez useState pour gérer l'état du champ de saisie
    const [username, setUsername] = useState({user.username});

    // Fonction pour mettre à jour l'état lorsqu'il y a un changement dans le champ de saisie
    const handleUsernameChange = (event :  ChangeEvent<HTMLInputElement>) => {
        setUsername(event.target.value);
    };

    return (
        <form id="account-content">
            <dl>
                <dt>Nom d'utilisateur</dt>
                {/* Utilisez la valeur de l'état et la fonction onChange */}
                <dd><input type="text" value={username} onChange={handleUsernameChange} /></dd>
            </dl>
        </form>
    );
}

function setVariable({varia} : {varia : any}){

}

// function InputSettings(){
//     return(
//         <div className="input-settings">
//             <p className="title-input-settings">{title}</p>     
//         </div>
//     )
// }