"use client";

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

function NavLink({ label, path, className }: NavLink & { className?: string }) {
  const active = usePathname() === path;
  return (
    <Button
      asChild
      variant={"ghost"}
      className={cn(
        "group hover:bg-border/20 h-10 rounded-none font-bold text-white/50 hover:text-white/50",
        active && "bg-border/20 text-white hover:text-white",
        className,
      )}
    >
      <Link href={path}>
        <span
          className={"transition-transform duration-150 group-hover:scale-105"}
        >
          {label}
        </span>
      </Link>
    </Button>
  );
}

export default NavLink;
