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

export const VerticalNav = () => {
  return (
    <div className="w-64 bg-base-300 p-4 rounded-lg shadow-md">
      <ul className="menu">
        <li>
          <Link href="/">
            <HomeIcon /> Dashboard
          </Link>
        </li>
        <li>
          <Link href="/profile">
            <PersonIcon /> Profil
          </Link>
        </li>
        <li>
          <Link href="/events">
            <RocketIcon />
            Events & Kurse
          </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/event">Events</Link>
              </li>
            </ul>
          </details>
        </li>
        <li>
          <Link href="/settings">
            <GearIcon />
            Einstellungen
          </Link>
        </li>
      </ul>
    </div>
  );
};

export const HorizontalNav = () => (
  <div className="navbar bg-base-200 shadow-md rounded-lg mb-4">
    <div className="flex-1">
      <a className="btn btn-ghost normal-case text-xl">
        Virtual Air Rescue - HUB
      </a>
    </div>
    <div className="flex-none">
      <ul className="flex space-x-2 px-1">
        <li>
          <Link href="/">
            <button className="btn btn-sm btn-outline btn-info">
              Zur Leitstelle
            </button>
          </Link>
        </li>
        <li>
          <Link href="/logout">
            <button className="btn btn-sm">
              <ExitIcon /> Logout
            </button>
          </Link>
        </li>
      </ul>
    </div>
  </div>
);