import { Avatar, Menu, Portal, Box } from "@chakra-ui/react";
import { NavLink } from "react-router-dom";
import useAuthStore from "../../store/authStore";

export default function UserAvatarMenu({ name, avatar }) {
	const { logout } = useAuthStore();

	return (
		<Menu.Root>
			<Menu.Trigger focusRing="none">
				<Box
					rounded="full"
					tabIndex={0}
					_hover={{ boxShadow: "0 0 0 2px rgb(102, 122, 182)" }}
					cursor="pointer"
				>
					<Avatar.Root shape="full">
						<Avatar.Fallback name={name} />
						<Avatar.Image src={avatar} />
					</Avatar.Root>
				</Box>
			</Menu.Trigger>
			<Portal>
				{/* zIndex: overlay = 1300 */}
				<Menu.Positioner zIndex="overlay">
					<Menu.Content>
						<Menu.Item value="settings" as={NavLink} to={"/settings"}>
							Settings
						</Menu.Item>

						{/* Replaced console.log with the Zustand logout action */}
						<Menu.Item
							value="logout"
							onClick={logout}
							color="red.600"
							_dark={{ color: "red.400" }}
						>
							Logout
						</Menu.Item>
					</Menu.Content>
				</Menu.Positioner>
			</Portal>
		</Menu.Root>
	);
}