"use client";

import { usePathname } from "next/navigation";

/**
 * Next's App Router swaps route content instantly with no transition of its
 * own. Keying a wrapper div on the pathname forces React to remount it on
 * every navigation, which retriggers the `animate-fade-in` CSS animation
 * (see tailwind.config.ts) - the same technique used for tab switches on the
 * company detail page.
 */
export function PageTransition({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  return (
    <div key={pathname} className="animate-fade-in">
      {children}
    </div>
  );
}