import React from 'react';
import { UserThumb } from '@theorchard/suite-components';
import cx from 'classnames';
import { MainNavUserModal } from './mainNavUserModal';

const CLASS_NAME = 'MainNavFooterUserButton';

export interface Props {
    name: string;
    picture?: string;
}

export const MainNavFooterUserButton: React.FC<Props> = ({ name, picture }) => {
    const [shownModal, setShownModal] = React.useState(false);
    const toggleShowModal = () => setShownModal(!shownModal);

    return (
        <>
            <button
                className={cx(CLASS_NAME, 'NavLink')}
                data-testid={CLASS_NAME}
                onClick={() => {
                    toggleShowModal();
                }}
            >
                <div className="NavLink-icon">
                    <UserThumb image={picture} name={name} />
                </div>
                <span className="NavLink-title">{name}</span>
            </button>

            <MainNavUserModal isOpen={shownModal} onRequestClose={toggleShowModal} />
        </>
    );
};