import clsx from "clsx";
import {IconType} from "react-icons";
import {MdSpaceDashboard} from "react-icons/md";
import {BsFileEarmarkText, BsClockHistory} from "react-icons/bs";
import {RiLogoutBoxFill} from "react-icons/ri";
import {SlPencil} from "react-icons/sl";
import {FaAward} from "react-icons/fa";
import Link from "next/link";
import {useRouter} from "next/router";
import axios from "axios";

interface Props {
	path: string;
}

interface NavProps {
	Icon: IconType;
	label: string;
	path: string;
	keyPath: string;
}

const Nav = ({Icon, label, path, keyPath}: NavProps) => (
	<Link
		href={keyPath}
		className={clsx(
			"p-4 px-8 rounded-full flex gap-4 items-center cursor-pointer text-black hover:bg-mti-green hover:text-white transition duration-300 ease-in-out",
			path === keyPath && "bg-mti-green text-white",
		)}>
		<Icon size={20} />
		<span className="text-lg font-medium">{label}</span>
	</Link>
);

export default function Sidebar({path}: Props) {
	const router = useRouter();

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

	return (
		<section className="h-full flex bg-transparent flex-col justify-between w-1/6 px-4">
			<div className="flex flex-col gap-3">
				<Nav Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" />
				<Nav Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" />
				<Nav Icon={SlPencil} label="Exercises" path={path} keyPath="/exercise" />
				<Nav Icon={FaAward} label="Score" path={path} keyPath="/score" />
				<Nav Icon={BsClockHistory} label="Record" path={path} keyPath="/record" />
			</div>

			<div
				role="button"
				tabIndex={1}
				onClick={logout}
				className={clsx(
					"p-4 px-8 rounded-full flex gap-4 items-center cursor-pointer text-black hover:text-mti-orange transition duration-300 ease-in-out",
				)}>
				<RiLogoutBoxFill size={20} />
				<span className="text-lg font-medium">Log Out</span>
			</div>
		</section>
	);
}