"use client";

import { cn } from "@repo/shared-components";
import { ArrowLeftRight, Plane, Radar, Workflow } from "lucide-react";
import { useSession } from "next-auth/react";
import Link from "next/link";
import { usePathname } from "next/navigation";

export default function ModeSwitchDropdown({ className }: { className?: string }) {
	const path = usePathname();
	const session = useSession();

	return (
		<div className={cn("dropdown z-999999", className)}>
			<div tabIndex={0} role="button" className="btn m-1">
				<ArrowLeftRight size={22} /> {path.includes("pilot") && "Pilot"}
				{path.includes("dispatch") && "Leitstelle"}
			</div>
			<ul
				tabIndex={0}
				className="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm"
			>
				{session.data?.user.permissions?.includes("DISPO") && (
					<li>
						<Link href={"/dispatch"}>
							<Workflow size={22} /> Leitstelle
						</Link>
					</li>
				)}
				{session.data?.user.permissions?.includes("PILOT") && (
					<li>
						<Link href={"/pilot"}>
							<Plane size={22} /> Operations Center
						</Link>
					</li>
				)}
				<li>
					<Link href={"/tracker"}>
						<Radar size={22} /> Tracker
					</Link>
				</li>
			</ul>
		</div>
	);
}