import { useAuth } from '@/hooks/auth'
import { Avatar } from 'primereact/avatar'
import { memo, useEffect, useState } from 'react'
import { MdExpandMore } from 'react-icons/md'

function NavbarMemo() {
	const { logout } = useAuth({})
	const [user, setUser] = useState([])

	useEffect(() => {
		setUser(JSON.parse(localStorage.getItem('user')))
	}, [])

	const handleLogout = () => {
		logout()
	}

	return (
		<div className='navbar 2xl:px-24 px-10 flex justify-end items-center border-cream h-[150px]'>
			<div className='logout z-10 py-3 px-5'>
				<div className='flex items-center gap-x-3'>
					<Avatar image={'/img/M.png'} shape='circle' />
					<div className='text-white'>
						<p className='font-semibold capitalize'>{user && user.nama_lengkap}</p>
						<p className='text-xs text-hijau/70'>{user && user.role}</p>
					</div>
					<MdExpandMore className='text-xl' />
				</div>
				<div
					className='absolute bg-white top-24 2xl:right-32 right-20 w-56 p-3 rounded flex flex-col shadow-lg gap-y-3 logout-pop'
					onClick={handleLogout}
				>
					<div className='flex items-center gap-x-3 shadow-md p-2'>
						<Avatar image={'/img/M.png'} shape='circle' className='shadow' />
						<p className='font-semibold capitalize'>{user && user.nama_lengkap}</p>
					</div>
					<div className='flex items-center gap-x-3 hover:bg-abu2 cursor-pointer p-2 rounded'>
						<i className='pi pi-sign-out rounded-full p-2' />
						<p className='text-sm'>Logout</p>
					</div>
					<div className='bg-overlay'></div>
				</div>
			</div>
		</div>
	)
}

export const Navbar = memo(NavbarMemo)