import { Link, usePage } from '@inertiajs/react';
import { ComponentProps, ReactNode } from 'react';

interface NavLinkProps extends Omit<ComponentProps<typeof Link>, 'href'> {
  to: string;
  end?: boolean;
  className?: string;
  activeClassName?: string;
  children: ReactNode;
}

export function NavLink({
  to,
  end = false,
  className = '',
  activeClassName = '',
  children,
  ...props
}: NavLinkProps) {
  const { url } = usePage();
  const currentPath = url.split('?')[0];
  const isActive = end ? currentPath === to : currentPath === to || currentPath.startsWith(to + '/');

  return (
    <Link
      href={to}
      className={`${className} ${isActive ? activeClassName : ''}`.trim()}
      {...props}
    >
      {children}
    </Link>
  );
}

export default NavLink;