import { useState } from "react";

export default function ManageAccount() {
    const [name, setName] = useState("John Doe");
    const [email, setEmail] = useState("johndoe@example.com");
    const [phoneNumber, setPhoneNumber] = useState("123-456-7890");
    const [password, setPassword] = useState("************");

    const handleNameEdit = () => {
        // Add your logic to edit the name
    };

    const handleEmailEdit = () => {
        // Add your logic to edit the email
    };

    const handlePhoneNumberEdit = () => {
        // Add your logic to edit the phone number
    };

    const handlePasswordChange = () => {
        // Add your logic to change the password
    };

    const handleAccountDelete = () => {
        // Add your logic to delete the account
    };

    return (
        <div>
            <h2>Manage Account</h2>
            <h4>Profile Information</h4>
            <div className="input-style">
                <label htmlFor="name">Name:</label>
                <input type="text" id="name" value={name} readOnly />
                <button onClick={handleNameEdit} className="btn-input">
                    Edit
                </button>
            </div>
            <div className="input-style">
                <label htmlFor="email">Email:</label>
                <input type="email" id="email" value={email} readOnly />
                <button onClick={handleEmailEdit} className="btn-input">
                    Edit
                </button>
            </div>
            <div className="input-style">
                <label htmlFor="phoneNumber">Phone Number:</label>
                <input type="tel" id="phoneNumber" value={phoneNumber} readOnly />
                <button onClick={handlePhoneNumberEdit} className="btn-input">
                    Edit
                </button>
            </div>
            <h4>Security</h4>
            <div className="input-style">
                <label htmlFor="password">Password:</label>
                <input type="password" id="password" value={password} readOnly />
                <button onClick={handlePasswordChange} className="btn-input">
                    Change Password
                </button>
            </div>
            <h4>Account Actions</h4>
            <div>
                <button onClick={handleAccountDelete} className="btn-custom">
                    Delete Account
                </button>
                <p className="mt-10">
                    Warning: Deleting your account is irreversible. All your data will be permanently deleted.
                </p>
            </div>
        </div>
    );
}