import { Button } from "@/components/ui/button";
import Link from "next/link";
import { ModeToggle } from "@/components/ModeToggle";
import {
  House,
  NotebookPen,
  BriefcaseBusiness,
  MessageCircleMore,
  Handshake,
} from "lucide-react";

export function NavigationMenu() {
  return (
    <div className="flex justify-center fixed left-1/2 -translate-x-1/2 -translate-y-1/2 bottom-5 md:top-10 md:bottom-auto z-20 backdrop-blur-sm bg-white/20 outline-none rounded-lg border-1">
      <Link href="/">
        <Button variant="ghost">
          <div className="hidden md:inline">Home</div>
          <div className="md:hidden">
            <House />
          </div>
        </Button>
      </Link>
      <Link href="/blog">
        <Button variant="ghost">
          <div className="hidden md:inline">Blog</div>
          <div className="md:hidden">
            <NotebookPen />
          </div>
        </Button>
      </Link>
      <Link href="/portfolio">
        <Button variant="ghost">
          <div className="hidden md:inline">Portfolio</div>
          <div className="md:hidden">
            <BriefcaseBusiness />
          </div>
        </Button>
      </Link>
      {/*
      <Link href="/talk">
        <Button variant="ghost">
          <div className="hidden md:inline">Talk</div>
          <div className="md:hidden">
            <MessageCircleMore />
          </div>
        </Button>
      </Link>
      <Link href="/references">
        <Button variant="ghost">
          <div className="hidden md:inline">References</div>
          <div className="md:hidden">
            <Handshake />
          </div>
        </Button>
      </Link>
      */}
      <ModeToggle />
    </div>
  );
}