
import React,{Component} from 'react';
import axios from 'axios';
import {Link,useNavigate} from 'react-router-dom';

export default function Settings (navigation){
    const navigate = useNavigate();
    
        const logout=()=>{
            localStorage.clear();
            navigate("/login")
        }
    
        return (     
            <>
            <div id="appCapsule">

        <div className="section mt-3 text-center">
            <div className="avatar-section">
                <a href="#">
                    <img src="/site/img/user.png" alt="avatar" className="imaged w100 rounded"/>
                    <hr/>
                    <h3 className='text-primary'>{ localStorage.getItem('name')}</h3>
                    <h4 className='text-primary'>USERID #000{ localStorage.getItem('userid')}</h4>
                </a>
            </div>
        </div>

        <div className="listview-title mt-1">Account Settings</div>
        <ul className="listview image-listview text inset">
            
            <li>
                <Link to="/profile" className="item">
                    <div className="in">
                        <div>Update Profile</div>
                        <span className="text-primary">Edit</span>
                    </div>
                </Link>
            </li>
            <li>
                <Link to="/password" className="item">
                    <div className="in">
                        <div>Change Password</div>
                        <span className="text-primary">Edit</span>
                    </div>
                </Link>
            </li>
            <li>
                <Link to="/bank" className="item">
                    <div className="in">
                        <div>Bank Details</div>
                        <span className="text-primary">Edit</span>
                    </div>
                </Link>
            </li>
            <li>
                <Link to="/company" className="item">
                    <div className="in">
                        <div>About Company</div>
                    </div>
                </Link>
            </li>
            <li>
                <Link to="/contact" className="item">
                    <div className="in">
                        <div>Contact</div>
                    </div>
                </Link>
            </li>
            <li>
                <a onClick={logout} className="item">
                    <div className="in">
                        <div>Logout</div>
                    </div>
                </a>
            </li>
        </ul>
        </div> 
            </> 
        );
    }

