'use client';

import { Button } from '@repo/ui/components/ui/button';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

type NavButtonProps = {
  readonly disabled?: boolean;
  readonly href: string;
  readonly icon: React.ReactNode;
  readonly label: string;
};

export function NavButton({ disabled, href, icon, label }: NavButtonProps) {
  const pathname = usePathname();

  return (
    <Button
      asChild
      className="flex flex-col items-center p-6"
      disabled={disabled}
      variant={pathname.endsWith(href) ? 'default' : 'ghost'}
    >
      {disabled ? (
        <div className="flex cursor-not-allowed flex-col items-center opacity-50">
          <span>{icon}</span>
          <span className="mt-1 text-xs">{label}</span>
        </div>
      ) : (
        <Link href={href}>
          <span>{icon}</span>
          <span className="mt-1 text-xs">{label}</span>
        </Link>
      )}
    </Button>
  );
}