"use client";

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";
import { usePathname } from "next/navigation";

export function NavigationMenu() {
  const pathname = usePathname();

  return (
    <div className="flex justify-center">
      <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"
            className={`${pathname === "/" ? "text-red-500" : ""} text-xl`}
          >
            <div className="hidden md:inline">Home</div>
            <div className="md:hidden">
              <House style={{ width: "27px", height: "27px" }} />
            </div>
          </Button>
        </Link>
        <Link href="/blog">
          <Button
            variant="ghost"
            className={`${pathname === "/blog" ? "text-red-500" : ""} text-xl`}
          >
            <div className="hidden md:inline">Blog</div>
            <div className="md:hidden">
              <NotebookPen style={{ width: "27px", height: "27px" }} />
            </div>
          </Button>
        </Link>
        <Link href="/portfolio">
          <Button
            variant="ghost"
            className={`${pathname === "/portfolio" ? "text-red-500" : ""} text-xl`}
          >
            <div className="hidden md:inline">Portfolio</div>
            <div className="md:hidden">
              <BriefcaseBusiness style={{ width: "27px", height: "27px" }} />
            </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>
      */}
      </div>
      <div className="fixed md:right-2 right-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">
        <ModeToggle />
      </div>
    </div>
  );
}