import { useDispatch, useSelector } from 'react-redux';
import type { AppStore } from '@/lib/store';
import ImageWithFallback from '@/Component/Common/ImageWithFallback';
import { toggleProfileSidebar } from '@/lib/Features/ThemeSlice/themeSlice';
import { useEffect } from 'react';


const HeaderProfile = (props) => {
    const { hideHeader, userDetails } = props;
    const dispatch = useDispatch();
    const { toggleProfileSidebarState } = useSelector((state: AppStore) => state.themeSlice);

    const handleProfileToggle = () => {
        dispatch(toggleProfileSidebar(!toggleProfileSidebarState))
    }

    return (
        <div className={`relative inline-block text-left ${hideHeader ? 'xl:hidden' : ''}`} >
            <div className='flex gap-x-5 items-center cursor-pointer' onClick={handleProfileToggle}>
                <div className='flex gap-x-2.5 items-center'>
                    <div className='w-11 h-11 max-sm:w-9 max-sm:h-9 relative rounded-full overflow-hidden bg-neutral-100 ring-2 ring-white shadow-soft hover:ring-primary/20 transition-all'>
                        {userDetails && <ImageWithFallback src={userDetails?.image} alt='Profile' className='absolute w-full h-full object-cover left-0 right-0 top-0 bottom-0' height={45} width={45} />}
                    </div>
                </div>
            </div>

            {/* {
                isComponentVisible &&
                <div className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-xl bg-white shadow-lg border border-lightGray/30">
                    <div className="p-2">
                        <a onClick={handleLogout} className='cursor-pointer flex items-center p-3 text-sm font-medium text-gray-900 hover:bg-gray-10 rounded-lg'>
                            Logout
                        </a>
                    </div>
                </div>
            }
            {modal && <ConfirmationModal setModal={setModal} modal={modal} callbackFunction={callbackFunction} args={{ size: "sm", message: translations.logOutMessage }} translations={translations} />} */}
        </div>
    )
}

export default HeaderProfile