import React, { useMemo } from "react";
import { Item } from "@react-stately/collections";
import { Button, LinkButton } from "./button";
import { PopoverMenuTrigger } from "./popover/PopoverMenu";
import { Menu } from "./Menu";
import { Tooltip, TooltipTrigger } from "./Tooltip";
import { Avatar } from "./Avatar";
import { ReactComponent as UserIcon } from "./icons/User.svg";
import { ReactComponent as LoginIcon } from "./icons/Login.svg";
import { ReactComponent as LogoutIcon } from "./icons/Logout.svg";
import styles from "./UserMenu.module.css";
import { useLocation } from "react-router-dom";
import { Body } from "./typography/Typography";
export function UserMenu({
preventNavigation,
isAuthenticated,
isPasswordlessUser,
displayName,
avatarUrl,
onAction,
}) {
const location = useLocation();
const items = useMemo(() => {
const arr = [];
if (isAuthenticated) {
arr.push({
key: "user",
icon: UserIcon,
label: displayName,
});
if (isPasswordlessUser && !preventNavigation) {
arr.push({
key: "login",
label: "Sign In",
icon: LoginIcon,
});
}
if (!isPasswordlessUser && !preventNavigation) {
arr.push({
key: "logout",
label: "Sign Out",
icon: LogoutIcon,
});
}
}
return arr;
}, [isAuthenticated, isPasswordlessUser, displayName, preventNavigation]);
if (!isAuthenticated) {
return (
Log in
);
}
return (
{() => "Profile"}
{(props) => (
)}
);
}