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

export const VerticalNav = () => {
  return (
    <ul className="menu w-64 bg-base-300 p-4 rounded-lg shadow-md">
      <li>
        <Link href="/">
          <HomeIcon /> Dashboard
        </Link>
      </li>
      <li>
        <Link href="/profile">
          <PersonIcon /> Profile
        </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>
  );
};

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-primary">
              Zur Leitstelle
            </button>
          </Link>
        </li>
        <li>
          <Link href="/logout">
            <button className="btn btn-sm">
              <ExitIcon /> Logout
            </button>
          </Link>
        </li>
      </ul>
    </div>
  </div>
);