import axios from "axios";
import Link from "next/link";
import {useRouter} from "next/router";
import {Menubar} from "primereact/menubar";
import {MenuItem} from "primereact/menuitem";

interface Props {
	profilePicture: string;
}

/* eslint-disable @next/next/no-img-element */
export default function Navbar({profilePicture}: Props) {
	const router = useRouter();

	const logout = async () => {
		axios.post("/api/logout").finally(() => {
			router.push("/login");
		});
	};

	const items: MenuItem[] = [
		{
			label: "Home",
			icon: "pi pi-fw pi-home",
			url: "/",
		},
		{
			label: "Account",
			icon: "pi pi-fw pi-user",
			url: "/profile",
		},
		{
			label: "Exam",
			icon: "pi pi-fw pi-plus-circle",
			url: "/exam",
		},
		{
			label: "Users",
			icon: "pi pi-fw pi-users",
			items: [
				{label: "List", icon: "pi pi-fw pi-users", url: "/users"},
				{label: "Stats", icon: "pi pi-fw pi-chart-pie", url: "/user-stats"},
			],
		},
		{
			label: "Logout",
			icon: "pi pi-fw pi-power-off",
			command: logout,
		},
	];

	return (
		<div className="bg-neutral-100 z-10 w-full p-2">
			<Menubar model={items} />
		</div>
	);
}