import {
	HomeIcon,
	GearIcon,
	ExitIcon,
	LockClosedIcon,
	RocketIcon,
	ReaderIcon,
} from "@radix-ui/react-icons";
import Link from "next/link";
import { WarningAlert } from "./ui/PageAlert";

export const VerticalNav = () => {
	return (
		<ul className="menu w-64 bg-base-300 p-3 rounded-lg shadow-md font-semibold">
			<li>
				<Link href="/">
					<HomeIcon /> Dashboard
				</Link>
			</li>
			<li>
				<Link href="/events">
					<RocketIcon />
					Events & Kurse
				</Link>
			</li>
			<li>
				<Link href="/logbook">
					<ReaderIcon />
					Logbook
				</Link>
			</li>
			<li>
				<Link href="/settings">
					<GearIcon />
					Einstellungen
				</Link>
			</li>
			<li>
				<details open>
					<summary>
						<LockClosedIcon />
						Admin
					</summary>
					<ul>
						<li>
							<Link href="/admin/user">Benutzer</Link>
						</li>
						<li>
							<Link href="/admin/station">Stationen</Link>
						</li>
						<li>
							<Link href="/admin/keyword">Stichworte</Link>
						</li>
						<li>
							<Link href="/admin/event">Events</Link>
						</li>
						<li>
							<Link href="/admin/message">Service Nachrichten</Link>
						</li>
						<li>
							<Link href="/admin/report">Reports</Link>
						</li>
					</ul>
				</details>
			</li>
		</ul>
	);
};

export const HorizontalNav = () => (
	<div className="navbar bg-base-200 shadow-md rounded-lg mb-4">
		<div className="flex items-center">
			<a className="btn btn-ghost normal-case text-xl">Virtual Air Rescue - HUB</a>
			<WarningAlert />
		</div>
		<div className="flex items-center ml-auto">
			<ul className="flex space-x-2 px-1">
				<li>
					<Link href={process.env.NEXT_PUBLIC_DISPATCH_URL || "#!"} rel="noopener noreferrer">
						<button className="btn btn-sm btn-outline btn-primary">Zur Leitstelle</button>
					</Link>
				</li>
				<li>
					<Link href="/logout">
						<button className="btn btn-sm btn-ghost">
							<ExitIcon /> Logout
						</button>
					</Link>
				</li>
			</ul>
		</div>
	</div>
);