"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import React from "react";
import { Icons } from "./icons";
import { Button } from "./ui/button";
import { cn } from "@/lib/utils";

function NavLink({ href, name, icon }: NavLink) {
  const active = usePathname() === href;
  const IconComponent = icon ? Icons[icon as keyof typeof Icons] : null;
  return (
    <div className="relative">
      <Button
        asChild
        variant={"ghost"}
        className={cn(
          "p-2 size-12 text-muted-foreground/75 flex flex-col gap-2 hover:bg-transparent dark:hover:bg-transparent ",
          active && "text-foreground "
        )}
      >
        <Link href={href}>
          {IconComponent && (
            <IconComponent
              className={cn(
                "size-6 transition-transform duration-300",
                active && "scale-150"
              )}
            />
          )}
          <span
            className={cn(
              "text-xs -translate-y-1 transition-transform duration-300",
              active && "translate-y-0"
            )}
          >
            {name}
          </span>
        </Link>
      </Button>

      {/* Glow effect */}
      {active && (
        <div className="size-16 left-1/2 -z-10 -translate-x-1/2 transform blur-3xl  absolute -bottom-8 bg-gradient-to-t from-primary to-transparent" />
      )}
    </div>
  );
}

export default NavLink;