import {
  HomeIcon,
  PersonIcon,
  GearIcon,
  ExitIcon,
} 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 /> Profile
          </Link>
        </li>
        <li>
          <Link href="/settings/account">
            <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-primary">
              Zur Leitstelle
            </button>
          </Link>
        </li>
        <li>
          <Link href="/logout">
            <button className="btn btn-sm">
              <ExitIcon /> Logout
            </button>
          </Link>
        </li>
      </ul>
    </div>
  </div>
);